import { ComponentConfig } from '@puckeditor/core';
import ButtonGroupSection, {
  ButtonGroupProps,
} from '../sections/button-group-section';

export const ButtonGroupBlock: ComponentConfig<ButtonGroupProps> = {
  label: 'Button Group',
  fields: {
    buttons: {
      type: 'array',
      label: 'Buttons',
      getItemSummary: (item) => item.label || 'Button',
      defaultItemProps: {
        label: 'Button',
        href: '#',
        variant: 'primary',
        openInNewTab: false,
      },
      arrayFields: {
        label: { type: 'text', label: 'Label' },
        href: { type: 'text', label: 'URL / Link' },
        variant: {
          type: 'select',
          label: 'Variant',
          options: [
            { label: 'Primary', value: 'primary' },
            { label: 'Secondary', value: 'secondary' },
            { label: 'Outline', value: 'outline' },
            { label: 'Ghost', value: 'ghost' },
          ],
        },
        openInNewTab: {
          type: 'radio',
          label: 'Open in new tab',
          options: [
            { label: 'No', value: false as unknown as string },
            { label: 'Yes', value: true as unknown as string },
          ],
        },
      },
    },
    size: {
      type: 'radio',
      label: 'Size',
      options: [
        { label: 'SM', value: 'sm' },
        { label: 'MD', value: 'md' },
        { label: 'LG', value: 'lg' },
      ],
    },
    align: {
      type: 'radio',
      label: 'Alignment',
      options: [
        { label: 'Left', value: 'left' },
        { label: 'Center', value: 'center' },
        { label: 'Right', value: 'right' },
      ],
    },
    gap: {
      type: 'select',
      label: 'Gap',
      options: [
        { label: '8px', value: '8px' },
        { label: '12px', value: '12px' },
        { label: '16px', value: '16px' },
        { label: '24px', value: '24px' },
        { label: '32px', value: '32px' },
      ],
    },
    padding: { type: 'text', label: 'Padding (CSS)' },
  },
  defaultProps: {
    buttons: [
      {
        label: 'Get Started',
        href: '#',
        variant: 'primary',
        openInNewTab: false,
      },
      {
        label: 'Learn More',
        href: '#',
        variant: 'outline',
        openInNewTab: false,
      },
    ],
    size: 'md',
    align: 'left',
    gap: '16px',
    padding: '8px 0',
  },
  render: ButtonGroupSection,
};