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

/**
 * EmailTwoColumn - Two-column layout
 *
 * Renders content in two columns side by side.
 * Note: In actual email rendering, this uses tables for compatibility.
 */
export const EmailTwoColumn: ComponentConfig<EmailTwoColumnProps> = {
  label: 'Email Two Column',
  fields: {
    leftContent: {
      type: 'textarea',
      label: 'Left Column',
    },
    rightContent: {
      type: 'textarea',
      label: 'Right Column',
    },
    gap: {
      type: 'text',
      label: 'Gap',
    },
  },
  defaultProps: {
    leftContent: 'Left column content',
    rightContent: 'Right column content',
    gap: '20px',
  },
  render: ({ leftContent, rightContent, gap }) => {
    const renderContent = (content: string) => {
      const lines = content.split('\n');
      return lines.map((line, i) => (
        <React.Fragment key={i}>
          {line}
          {i < lines.length - 1 && <br />}
        </React.Fragment>
      ));
    };

    return (
      <div
        style={{
          display: 'flex',
          gap,
          margin: '16px 0',
        }}
      >
        <div style={{ flex: 1, fontSize: '16px', lineHeight: '1.6', color: '#374151' }}>
          {renderContent(leftContent)}
        </div>
        <div style={{ flex: 1, fontSize: '16px', lineHeight: '1.6', color: '#374151' }}>
          {renderContent(rightContent)}
        </div>
      </div>
    );
  },
};

export default EmailTwoColumn;
