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

const BUTTON_STYLES = {
  primary: {
    backgroundColor: '#4f46e5',
    color: '#ffffff',
    border: 'none',
  },
  secondary: {
    backgroundColor: '#ffffff',
    color: '#4f46e5',
    border: '2px solid #4f46e5',
  },
};

/**
 * EmailButton - Call-to-action button
 *
 * Renders a button with email-safe inline styles.
 * Uses table-based centering for email client compatibility.
 */
export const EmailButton: ComponentConfig<EmailButtonProps> = {
  label: 'Email Button',
  fields: {
    text: {
      type: 'text',
      label: 'Button Text',
    },
    href: {
      type: 'text',
      label: 'Link URL',
    },
    variant: {
      type: 'radio',
      label: 'Style',
      options: [
        { label: 'Primary', value: 'primary' },
        { label: 'Secondary', value: 'secondary' },
      ],
    },
    align: {
      type: 'radio',
      label: 'Alignment',
      options: [
        { label: 'Left', value: 'left' },
        { label: 'Center', value: 'center' },
        { label: 'Right', value: 'right' },
      ],
    },
  },
  defaultProps: {
    text: 'Click Here',
    href: '{{ manage_appointment_link }}',
    variant: 'primary',
    align: 'center',
  },
  render: ({ text, href, variant, align }) => {
    const buttonStyle = BUTTON_STYLES[variant] || BUTTON_STYLES.primary;
    const padding = variant === 'primary' ? '14px 28px' : '12px 24px';

    return (
      <div style={{ textAlign: align, margin: '16px 0' }}>
        <a
          href={href}
          target="_blank"
          rel="noopener noreferrer"
          style={{
            display: 'inline-block',
            padding,
            borderRadius: '6px',
            fontWeight: 600,
            fontSize: variant === 'primary' ? '16px' : '14px',
            textDecoration: 'none',
            ...buttonStyle,
          }}
        >
          {text}
        </a>
      </div>
    );
  },
};

export default EmailButton;
