import { ComponentConfig } from '@puckeditor/core';
import ColorPicker from '../fields/color-picker';
import CardSection, { CardProps, ICONS } from '../sections/card-section';

const iconOptions = Object.keys(ICONS).map((name) => ({
  label: name,
  value: name,
}));

export const CardBlock: ComponentConfig<CardProps> = {
  label: 'Card',
  fields: {
    icon: {
      type: 'select',
      label: 'Icon',
      options: iconOptions,
    },
    iconColor: {
      type: 'custom',
      label: 'Icon Color',
      render: (props) => <ColorPicker {...props} />,
    },
    title: { type: 'text', label: 'Title' },
    description: { type: 'textarea', label: 'Description' },
    mode: {
      type: 'radio',
      label: 'Style',
      options: [
        { label: 'Flat', value: 'flat' },
        { label: 'Card', value: 'card' },
      ],
    },
    padding: { type: 'text', label: 'Padding (CSS)' },
  },
  defaultProps: {
    icon: 'Star',
    iconColor: '#6366f1',
    title: 'Feature Title',
    description:
      'Describe the key benefit or feature here. Keep it concise and compelling.',
    mode: 'flat',
    padding: '8px 0',
  },
  render: CardSection,
};