import { ComponentConfig } from '@puckeditor/core';
import FlexSection, { FlexProps } from '../sections/flex-section';

export const FlexBlock: ComponentConfig<FlexProps> = {
  label: 'Flex Container',
  fields: {
    direction: {
      type: 'radio',
      label: 'Direction',
      options: [
        { label: 'Row', value: 'row' },
        { label: 'Column', value: 'column' },
      ],
    },
    justify: {
      type: 'select',
      label: 'Justify Content',
      options: [
        { label: 'Start', value: 'flex-start' },
        { label: 'Center', value: 'center' },
        { label: 'End', value: 'flex-end' },
        { label: 'Space Between', value: 'space-between' },
        { label: 'Space Around', value: 'space-around' },
      ],
    },
    align: {
      type: 'select',
      label: 'Align Items',
      options: [
        { label: 'Start', value: 'flex-start' },
        { label: 'Center', value: 'center' },
        { label: 'End', value: 'flex-end' },
        { label: 'Stretch', value: 'stretch' },
      ],
    },
    wrap: {
      type: 'radio',
      label: 'Wrap',
      options: [
        { label: 'Wrap', value: 'wrap' },
        { label: 'No Wrap', value: 'nowrap' },
      ],
    },
    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' },
      ],
    },
    padding: { type: 'text', label: 'Padding (CSS)' },
  },
  defaultProps: {
    direction: 'row',
    justify: 'flex-start',
    align: 'flex-start',
    wrap: 'wrap',
    gap: '24px',
    padding: '16px 0',
  },
  render: FlexSection,
};