import { ComponentConfig } from '@puckeditor/core';
import ColorPicker from '../fields/color-picker';
import AboutSection, { AboutProps } from '../sections/about-section';

export const AboutBlock: ComponentConfig<{
  props: AboutProps;
  fields: {
    userField: {
      type: 'userField';
      option: boolean;
    };
  };
}> = {
  label: 'About',
  fields: {
    title: { type: 'text', label: 'Title' },
    description: { type: 'textarea', label: 'Description' },
    cardTitle: { type: 'text', label: 'Card Section Title' },
    cardDescription: { type: 'textarea', label: 'Card Section Description' },
    colors: {
      type: 'object',
      label: 'Background Color',
      objectFields: {
        color1: {
          type: 'custom',
          label: 'Color 1',
          render: (props) => <ColorPicker {...props} />,
        },
        color2: {
          type: 'custom',
          label: 'Color 2',
          render: (props) => <ColorPicker {...props} />,
        },
      },
    },
    cards: {
      type: 'array',
      label: 'Steps',
      getItemSummary: (item) => item.title || 'Step',
      arrayFields: {
        number: { type: 'text', label: 'Number' },
        title: { type: 'text', label: 'Title' },
        description: { type: 'textarea', label: 'Description' },
      },
      defaultItemProps: {
        number: '1',
        title: 'Card Title',
        description:
          'Access diversified investment strategies managed by algorithmic trading and market experts.',
      },
    },
  },
  defaultProps: {
    title: 'About',
    description:
      'Invest with confidence and ease using our platform. We provide a secure and user-friendly environment for you to grow your wealth through smart investments.',
    cardTitle: 'How it works',
    cardDescription:
      'Access diversified investment strategies managed by algorithmic trading and market experts.',
    colors: {
      color1: '#4DEC96',
      color2: '#EE6A2D',
    },
    cards: [
      {
        number: '1',
        title: 'Card Title',
        description:
          'Access diversified investment strategies managed by algorithmic trading and market experts.',
      },
      {
        number: '2',
        title: 'Card Title',
        description:
          'Access diversified investment strategies managed by algorithmic trading and market experts.',
      },
      {
        number: '3',
        title: 'Card Title',
        description:
          'Access diversified investment strategies managed by algorithmic trading and market experts.',
      },
      {
        number: '4',
        title: 'Card Title',
        description:
          'Access diversified investment strategies managed by algorithmic trading and market experts.',
      },
    ],
  },
  render: AboutSection,
};