import { ComponentConfig } from '@puckeditor/core';
import ColumnsSection, { ColumnsProps } from '../sections/columns-section';

export const ColumnsBlock: ComponentConfig<ColumnsProps> = {
  label: 'Columns',
  fields: {
    numColumns: {
      type: 'radio',
      label: 'Number of Columns',
      options: [
        { label: '2', value: 2 as unknown as string },
        { label: '3', value: 3 as unknown as string },
        { label: '4', value: 4 as unknown as string },
      ],
    },
    gap: {
      type: 'select',
      label: 'Gap',
      options: [
        { label: 'None', value: '0px' },
        { label: '8px', value: '8px' },
        { label: '16px', value: '16px' },
        { label: '24px', value: '24px' },
        { label: '32px', value: '32px' },
        { label: '48px', value: '48px' },
      ],
    },
    verticalAlign: {
      type: 'radio',
      label: 'Vertical Align',
      options: [
        { label: 'Top', value: 'start' },
        { label: 'Middle', value: 'center' },
        { label: 'Bottom', value: 'end' },
      ],
    },
    padding: { type: 'text', label: 'Padding (CSS)' },
  },
  defaultProps: {
    numColumns: 2,
    gap: '24px',
    verticalAlign: 'start',
    padding: '16px 0',
  },
  render: ColumnsSection,
};