import { ComponentConfig } from '@puckeditor/core';
import ImagePicker from '../fields/image-picker';
import PaymentGatewaysSection, {
  PaymentGatewaysProps,
} from '../sections/payment-gateways-section';

export const PaymentGatewaysBlock: ComponentConfig<{
  props: PaymentGatewaysProps;
  fields: {
    userField: {
      type: 'userField';
      option: boolean;
    };
  };
}> = {
  label: 'Gateways',
  fields: {
    title: { type: 'text', label: 'Title' },
    images: {
      type: 'array',
      label: 'Gateways',
      getItemSummary: (item) => item.alt || 'Gateway',
      arrayFields: {
        src: {
          type: 'custom',
          label: 'Image',
          render: (props) => <ImagePicker {...props} />,
        },
        alt: { type: 'text', label: 'Alt text' },
      },
      defaultItemProps: {
        src: 'paypal.svg',
        alt: 'Paypal',
      },
    },
  },
  defaultProps: {
    title: 'Supported Payment Gateways',
    images: [{ src: 'https://placehold.co/146x39', alt: 'Paypal' }],
  },
  render: PaymentGatewaysSection,
};