import { ComponentConfig } from '@puckeditor/core';
import RichTextSection, { RichTextProps } from '../sections/rich-text-section';

export const RichTextBlock: ComponentConfig<RichTextProps> = {
  label: 'Rich Text',
  fields: {
    content: {
      type: 'richtext',
      label: 'Content',
    },
    align: {
      type: 'radio',
      label: 'Alignment',
      options: [
        { label: 'Left', value: 'left' },
        { label: 'Center', value: 'center' },
        { label: 'Right', value: 'right' },
      ],
    },
    maxWidth: { type: 'text', label: 'Max Width (e.g. 800px)' },
    padding: { type: 'text', label: 'Padding (CSS)' },
  },
  defaultProps: {
    content:
      '<h2>Your Heading</h2><p>Add your content here. You can <strong>bold</strong>, <em>italicize</em>, and format text using the rich text editor.</p>',
    align: 'left',
    maxWidth: '',
    padding: '16px 0',
  },
  render: RichTextSection,
};