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

/**
 * EmailHeader - Business logo and name header
 *
 * Displays the business branding at the top of the email.
 * Supports optional logo image and preheader text.
 */
const EmailHeaderRender: React.FC<EmailHeaderProps> = ({ logoUrl, businessName, preheader }) => {
  console.log('[RENDER] EmailHeaderRender called with:', { logoUrl, businessName, preheader });
  return (
    <div
      style={{
        padding: '32px 40px',
        textAlign: 'center',
        backgroundColor: '#f8fafc',
      }}
    >
      {/* Hidden preheader text for email clients */}
      {preheader && (
        <div
          style={{
            display: 'none',
            maxHeight: 0,
            overflow: 'hidden',
          }}
        >
          {preheader}
        </div>
      )}

      {logoUrl && (
        <img
          src={logoUrl}
          alt={businessName}
          style={{
            maxHeight: '60px',
            maxWidth: '200px',
            marginBottom: '16px',
          }}
        />
      )}

      {businessName && (
        <div
          style={{
            fontSize: '20px',
            fontWeight: 600,
            color: '#111827',
          }}
        >
          {businessName}
        </div>
      )}
    </div>
  );
};

export const EmailHeader: ComponentConfig<EmailHeaderProps> = {
  label: 'Email Header',
  fields: {
    logoUrl: {
      type: 'text',
      label: 'Logo URL',
    },
    businessName: {
      type: 'text',
      label: 'Business Name',
    },
    preheader: {
      type: 'text',
      label: 'Preheader Text',
    },
  },
  defaultProps: {
    logoUrl: '',
    businessName: '{{ tenant_name }}',
    preheader: '',
  },
  render: EmailHeaderRender,
};

export default EmailHeader;