import { ComponentConfig } from '@puckeditor/core';
import TextSection, { TextProps } from '../sections/text-section';

export const TextBlock: ComponentConfig<TextProps> = {
  label: 'Text',
  fields: {
    text: { type: 'textarea', label: 'Text' },
    size: {
      type: 'select',
      label: 'Font Size',
      options: [
        { label: 'SM (14px)', value: '14px' },
        { label: 'Base (16px)', value: '16px' },
        { label: 'LG (18px)', value: '18px' },
        { label: 'XL (20px)', value: '20px' },
        { label: '2XL (24px)', value: '24px' },
      ],
    },
    align: {
      type: 'radio',
      label: 'Alignment',
      options: [
        { label: 'Left', value: 'left' },
        { label: 'Center', value: 'center' },
        { label: 'Right', value: 'right' },
      ],
    },
    color: {
      type: 'radio',
      label: 'Color',
      options: [
        { label: 'Default', value: 'default' },
        { label: 'Muted', value: 'muted' },
      ],
    },
    maxWidth: { type: 'text', label: 'Max Width (e.g. 600px)' },
    padding: { type: 'text', label: 'Padding (CSS)' },
  },
  defaultProps: {
    text: 'Add your text content here. This is a paragraph block you can use to add descriptive text to your page.',
    size: '16px',
    align: 'left',
    color: 'default',
    maxWidth: '',
    padding: '8px 0',
  },
  render: TextSection,
};