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

const HEADING_STYLES = {
  h1: {
    fontSize: '28px',
    fontWeight: 700,
    lineHeight: '1.3',
    marginBottom: '16px',
  },
  h2: {
    fontSize: '22px',
    fontWeight: 600,
    lineHeight: '1.3',
    marginBottom: '12px',
  },
  h3: {
    fontSize: '18px',
    fontWeight: 600,
    lineHeight: '1.3',
    marginBottom: '8px',
  },
};

/**
 * EmailHeading - Heading text (h1-h3)
 *
 * Renders heading text with email-safe inline styles.
 * Supports template tags like {{ customer_name }}.
 */
export const EmailHeading: ComponentConfig<EmailHeadingProps> = {
  label: 'Email Heading',
  fields: {
    text: {
      type: 'text',
      label: 'Text',
    },
    level: {
      type: 'select',
      label: 'Level',
      options: [
        { label: 'H1 - Main Title', value: 'h1' },
        { label: 'H2 - Section Title', value: 'h2' },
        { label: 'H3 - Subsection Title', value: 'h3' },
      ],
    },
    align: {
      type: 'radio',
      label: 'Alignment',
      options: [
        { label: 'Left', value: 'left' },
        { label: 'Center', value: 'center' },
        { label: 'Right', value: 'right' },
      ],
    },
  },
  defaultProps: {
    text: 'Heading Text',
    level: 'h2',
    align: 'left',
  },
  render: ({ text, level, align }) => {
    const Tag = level as keyof JSX.IntrinsicElements;
    const styles = HEADING_STYLES[level] || HEADING_STYLES.h2;

    return (
      <Tag
        style={{
          ...styles,
          color: '#111827',
          textAlign: align,
          margin: 0,
          marginBottom: styles.marginBottom,
          padding: 0,
        }}
      >
        {text}
      </Tag>
    );
  },
};

export default EmailHeading;
