import { ComponentConfig } from '@puckeditor/core';
import ImagePicker from '../fields/image-picker';
import WhyChooseUsSection, {
  WhyChooseUsProps,
} from '../sections/why-choose-us-section';

export const WhyChooseUsBlock: ComponentConfig<{
  props: WhyChooseUsProps;
  fields: {
    userField: {
      type: 'userField';
      option: boolean;
    };
  };
}> = {
  label: 'Why Choose Us',
  fields: {
    title: { type: 'text', label: 'Title' },
    subtitle: { type: 'textarea', label: 'Subtitle' },
    cards: {
      type: 'array',
      label: 'Cards',
      min: 1,
      getItemSummary: (item) => item.description?.slice(0, 30) || 'Card',
      arrayFields: {
        icon: {
          type: 'custom',
          label: 'Icon',
          render: (props) => <ImagePicker {...props} />,
        },
        description: { type: 'textarea', label: 'Description' },
      },
      defaultItemProps: {
        icon: '',
        description:
          'Partner allows you to browse multiple carriers for travel.',
      },
    },
  },
  defaultProps: {
    title: 'Why Choose Us?',
    subtitle:
      'Our Vision is to revolutionize the way people travel by introducing intelligent trip planning',
    cards: [
      {
        icon: '',
        description:
          'Partner allows you to browse multiple carriers for travel.',
      },
      {
        icon: '',
        description:
          'The website is a way for partners to communicate with their customers.',
      },
      {
        icon: '',
        description: 'The eBook Reader is a new way to look at e-books.',
      },
    ],
  },
  render: WhyChooseUsSection,
};