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

const SIZE_CLASSES = {
  small: 'h-4',
  medium: 'h-8',
  large: 'h-16',
  xlarge: 'h-24',
};

export const Spacer: ComponentConfig<SpacerProps> = {
  label: 'Spacer',
  fields: {
    size: {
      type: 'select',
      options: [
        { label: 'Small', value: 'small' },
        { label: 'Medium', value: 'medium' },
        { label: 'Large', value: 'large' },
        { label: 'Extra Large', value: 'xlarge' },
      ],
    },
  },
  defaultProps: {
    size: 'medium',
  },
  render: ({ size }) => {
    const sizeClass = SIZE_CLASSES[size] || SIZE_CLASSES.medium;
    return <div className={sizeClass} aria-hidden="true" />;
  },
};

export default Spacer;
