import { ComponentConfig } from '@puckeditor/core';
import SpacerSection, { SpacerProps } from '../sections/spacer-section';

export const SpacerBlock: ComponentConfig<SpacerProps> = {
  label: 'Spacer',
  fields: {
    size: {
      type: 'select',
      label: 'Size',
      options: [
        { label: '8px (XS)', value: '8px' },
        { label: '16px (SM)', value: '16px' },
        { label: '24px (MD)', value: '24px' },
        { label: '32px', value: '32px' },
        { label: '48px (LG)', value: '48px' },
        { label: '64px (XL)', value: '64px' },
        { label: '96px (2XL)', value: '96px' },
        { label: '128px (3XL)', value: '128px' },
      ],
    },
    direction: {
      type: 'radio',
      label: 'Direction',
      options: [
        { label: 'Vertical', value: 'vertical' },
        { label: 'Horizontal', value: 'horizontal' },
        { label: 'Both', value: 'both' },
      ],
    },
  },
  defaultProps: {
    size: '48px',
    direction: 'vertical',
  },
  render: SpacerSection,
};