import { ComponentConfig } from '@puckeditor/core';
import HeadingSection, { HeadingProps } from '../sections/heading-section';

export const HeadingBlock: ComponentConfig<HeadingProps> = {
  label: 'Heading',
  fields: {
    text: { type: 'textarea', label: 'Text' },
    level: {
      type: 'select',
      label: 'HTML Level',
      options: [
        { label: 'H1', value: 'h1' },
        { label: 'H2', value: 'h2' },
        { label: 'H3', value: 'h3' },
        { label: 'H4', value: 'h4' },
        { label: 'H5', value: 'h5' },
        { label: 'H6', value: 'h6' },
      ],
    },
    size: {
      type: 'select',
      label: 'Visual Size',
      options: [
        { label: 'XS (14px)', value: '14px' },
        { label: 'SM (16px)', value: '16px' },
        { label: 'MD (20px)', value: '20px' },
        { label: 'LG (24px)', value: '24px' },
        { label: 'XL (30px)', value: '30px' },
        { label: '2XL (36px)', value: '36px' },
        { label: '3XL (48px)', value: '48px' },
        { label: '4XL (60px)', value: '60px' },
        { label: '5XL (72px)', value: '72px' },
      ],
    },
    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' },
      ],
    },
    padding: {
      type: 'text',
      label: 'Padding (CSS)',
    },
  },
  defaultProps: {
    text: 'Your Heading Here',
    level: 'h2',
    size: '36px',
    align: 'left',
    color: 'default',
    padding: '8px 0',
  },
  render: HeadingSection,
};