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

/**
 * EmailPanel - Highlighted info box
 *
 * A colored panel for highlighting important information.
 * Useful for appointment details, order summaries, etc.
 */
export const EmailPanel: ComponentConfig<EmailPanelProps> = {
  label: 'Email Panel',
  fields: {
    content: {
      type: 'textarea',
      label: 'Content',
    },
    backgroundColor: {
      type: 'text',
      label: 'Background Color',
    },
  },
  defaultProps: {
    content: 'Important information goes here.\nAppointment: {{ appointment_datetime }}\nService: {{ service_name }}',
    backgroundColor: '#f3f4f6',
  },
  render: ({ content, backgroundColor }) => {
    // Convert newlines to <br> for display
    const lines = content.split('\n');

    return (
      <div
        style={{
          padding: '20px',
          backgroundColor,
          borderRadius: '6px',
          margin: '16px 0',
          fontSize: '16px',
          lineHeight: '1.6',
          color: '#374151',
        }}
      >
        {lines.map((line, i) => (
          <React.Fragment key={i}>
            {line}
            {i < lines.length - 1 && <br />}
          </React.Fragment>
        ))}
      </div>
    );
  },
};

export default EmailPanel;
