import { ComponentConfig } from '@puckeditor/core';
import ButtonSection, { ButtonProps } from '../sections/button-section';

export const ButtonBlock: ComponentConfig<ButtonProps> = {
  label: 'Button',
  fields: {
    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' },
      ],
    },
    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' },
      ],
    },
    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 },
      ],
    },
    padding: { type: 'text', label: 'Padding (CSS)' },
  },
  defaultProps: {
    label: 'Click Here',
    href: '#',
    variant: 'primary',
    size: 'md',
    align: 'left',
    openInNewTab: false,
    padding: '8px 0',
  },
  render: ButtonSection,
};