import React from 'react';
import type { ComponentConfig } from '@measured/puck';
import type { HeadingProps } from '../../types';

const ALIGN_CLASSES = {
  left: 'text-left',
  center: 'text-center',
  right: 'text-right',
};

const HEADING_CLASSES = {
  h1: 'text-4xl sm:text-5xl lg:text-6xl font-bold',
  h2: 'text-3xl sm:text-4xl font-bold',
  h3: 'text-2xl sm:text-3xl font-semibold',
  h4: 'text-xl sm:text-2xl font-semibold',
  h5: 'text-lg sm:text-xl font-medium',
  h6: 'text-base sm:text-lg font-medium',
};

export const Heading: ComponentConfig<HeadingProps> = {
  label: 'Heading',
  fields: {
    text: {
      type: 'text',
      label: 'Text',
    },
    level: {
      type: 'select',
      options: [
        { label: 'H1 - Page Title', value: 'h1' },
        { label: 'H2 - Section Title', value: 'h2' },
        { label: 'H3 - Subsection Title', value: 'h3' },
        { label: 'H4 - Small Title', value: 'h4' },
        { label: 'H5 - Mini Title', value: 'h5' },
        { label: 'H6 - Smallest', value: 'h6' },
      ],
    },
    align: {
      type: 'radio',
      options: [
        { label: 'Left', value: 'left' },
        { label: 'Center', value: 'center' },
        { label: 'Right', value: 'right' },
      ],
    },
  },
  defaultProps: {
    text: 'Heading',
    level: 'h2',
    align: 'left',
  },
  render: ({ text, level, align }) => {
    const Tag = level as keyof JSX.IntrinsicElements;
    const alignClass = ALIGN_CLASSES[align] || ALIGN_CLASSES.left;
    const headingClass = HEADING_CLASSES[level] || HEADING_CLASSES.h2;

    return (
      <Tag className={`${headingClass} ${alignClass} text-gray-900 dark:text-white mb-4`}>
        {text}
      </Tag>
    );
  },
};

export default Heading;
