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

/**
 * EmailText - Paragraph text content
 *
 * Renders text content with email-safe inline styles.
 * Supports template tags and newline conversion to <br>.
 */
export const EmailText: ComponentConfig<EmailTextProps> = {
  label: 'Email Text',
  fields: {
    content: {
      type: 'textarea',
      label: 'Content',
    },
    align: {
      type: 'radio',
      label: 'Alignment',
      options: [
        { label: 'Left', value: 'left' },
        { label: 'Center', value: 'center' },
        { label: 'Right', value: 'right' },
      ],
    },
  },
  defaultProps: {
    content: 'Your email content here. Use {{ customer_name }} for personalization.',
    align: 'left',
  },
  render: ({ content, align }) => {
    // Convert newlines to <br> for display
    const lines = content.split('\n');

    return (
      <p
        style={{
          fontSize: '16px',
          lineHeight: '1.6',
          color: '#374151',
          textAlign: align,
          margin: 0,
          marginBottom: '16px',
        }}
      >
        {lines.map((line, i) => (
          <React.Fragment key={i}>
            {line}
            {i < lines.length - 1 && <br />}
          </React.Fragment>
        ))}
      </p>
    );
  },
};

export default EmailText;
