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

/**
 * EmailLayout - Root wrapper for email templates
 *
 * Provides the outer wrapper with background color.
 * In actual email rendering, this creates table-based structure.
 */
export const EmailLayout: ComponentConfig<EmailLayoutProps> = {
  label: 'Email Layout',
  fields: {
    backgroundColor: {
      type: 'text',
      label: 'Background Color',
    },
    contentBackgroundColor: {
      type: 'text',
      label: 'Content Background Color',
    },
  },
  defaultProps: {
    backgroundColor: '#f4f4f5',
    contentBackgroundColor: '#ffffff',
  },
  render: ({ backgroundColor, contentBackgroundColor, puck }) => {
    const { renderDropZone } = puck || {};

    return (
      <div
        style={{
          backgroundColor,
          padding: '40px 20px',
          minHeight: '100vh',
        }}
      >
        <div
          style={{
            maxWidth: '600px',
            margin: '0 auto',
            backgroundColor: contentBackgroundColor,
            borderRadius: '8px',
            overflow: 'hidden',
          }}
        >
          {renderDropZone ? renderDropZone({ zone: 'email-content' }) : null}
        </div>
      </div>
    );
  },
};

export default EmailLayout;
