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

/**
 * EmailFooter - Business contact information footer
 *
 * Displays business contact details at the bottom of the email.
 * Supports template tags for dynamic content.
 */
const EmailFooterRender: React.FC<EmailFooterProps> = ({ address, phone, email, website }) => {
  const contactItems: React.ReactNode[] = [];

  if (phone) contactItems.push(phone);
  if (email) {
    contactItems.push(
      <a key="email" href={`mailto:${email}`} style={{ color: '#4f46e5', textDecoration: 'underline' }}>
        {email}
      </a>
    );
  }
  if (website) {
    contactItems.push(
      <a key="website" href={website} style={{ color: '#4f46e5', textDecoration: 'underline' }}>
        {website}
      </a>
    );
  }

  return (
    <div
      style={{
        padding: '24px 40px',
        backgroundColor: '#f8fafc',
        textAlign: 'center',
        fontSize: '13px',
        color: '#6b7280',
      }}
    >
      {address && (
        <p style={{ margin: '0 0 8px 0' }}>{address}</p>
      )}

      {contactItems.length > 0 && (
        <p style={{ margin: '0 0 8px 0' }}>
          {contactItems.map((item, i) => (
            <React.Fragment key={i}>
              {item}
              {i < contactItems.length - 1 && ' | '}
            </React.Fragment>
          ))}
        </p>
      )}
    </div>
  );
};

export const EmailFooter: ComponentConfig<EmailFooterProps> = {
  label: 'Email Footer',
  fields: {
    address: {
      type: 'text',
      label: 'Address',
    },
    phone: {
      type: 'text',
      label: 'Phone',
    },
    email: {
      type: 'text',
      label: 'Email',
    },
    website: {
      type: 'text',
      label: 'Website',
    },
  },
  defaultProps: {
    address: '{{ tenant_address }}',
    phone: '{{ tenant_phone }}',
    email: '{{ tenant_email }}',
    website: '{{ tenant_website_url }}',
  },
  render: EmailFooterRender,
};

export default EmailFooter;
