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

const SPACER_SIZES = {
  sm: '16px',
  md: '32px',
  lg: '48px',
};

/**
 * EmailSpacer - Vertical spacing
 *
 * Adds vertical whitespace between components.
 */
export const EmailSpacer: ComponentConfig<EmailSpacerProps> = {
  label: 'Email Spacer',
  fields: {
    size: {
      type: 'radio',
      label: 'Size',
      options: [
        { label: 'Small', value: 'sm' },
        { label: 'Medium', value: 'md' },
        { label: 'Large', value: 'lg' },
      ],
    },
  },
  defaultProps: {
    size: 'md',
  },
  render: ({ size }) => {
    const height = SPACER_SIZES[size] || SPACER_SIZES.md;

    return <div style={{ height }} />;
  },
};

export default EmailSpacer;
