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

/**
 * EmailImage - Image component
 *
 * Displays an image with email-safe styles.
 * Uses table-based alignment for email client compatibility.
 */
export const EmailImage: ComponentConfig<EmailImageProps> = {
  label: 'Email Image',
  fields: {
    src: {
      type: 'text',
      label: 'Image URL',
    },
    alt: {
      type: 'text',
      label: 'Alt Text',
    },
    maxWidth: {
      type: 'text',
      label: 'Max Width',
    },
    align: {
      type: 'radio',
      label: 'Alignment',
      options: [
        { label: 'Left', value: 'left' },
        { label: 'Center', value: 'center' },
        { label: 'Right', value: 'right' },
      ],
    },
  },
  defaultProps: {
    src: '',
    alt: 'Image',
    maxWidth: '100%',
    align: 'center',
  },
  render: ({ src, alt, maxWidth, align }) => {
    if (!src) {
      return (
        <div
          style={{
            textAlign: align,
            padding: '32px',
            backgroundColor: '#f3f4f6',
            color: '#6b7280',
            fontSize: '14px',
            margin: '16px 0',
          }}
        >
          [Image Placeholder - Add URL]
        </div>
      );
    }

    return (
      <div style={{ textAlign: align, margin: '16px 0' }}>
        <img
          src={src}
          alt={alt}
          style={{
            maxWidth,
            height: 'auto',
            display: 'inline-block',
          }}
        />
      </div>
    );
  },
};

export default EmailImage;
