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

const STYLE_CLASSES = {
  solid: 'border-solid',
  dashed: 'border-dashed',
  dotted: 'border-dotted',
};

const THICKNESS_CLASSES = {
  thin: 'border-t',
  medium: 'border-t-2',
  thick: 'border-t-4',
};

export const Divider: ComponentConfig<DividerProps> = {
  label: 'Divider',
  fields: {
    style: {
      type: 'select',
      options: [
        { label: 'Solid', value: 'solid' },
        { label: 'Dashed', value: 'dashed' },
        { label: 'Dotted', value: 'dotted' },
      ],
    },
    color: {
      type: 'text',
      label: 'Color',
    },
    thickness: {
      type: 'select',
      options: [
        { label: 'Thin', value: 'thin' },
        { label: 'Medium', value: 'medium' },
        { label: 'Thick', value: 'thick' },
      ],
    },
  },
  defaultProps: {
    style: 'solid',
    color: '',
    thickness: 'thin',
  },
  render: ({ style, color, thickness }) => {
    const styleClass = STYLE_CLASSES[style] || STYLE_CLASSES.solid;
    const thicknessClass = THICKNESS_CLASSES[thickness] || THICKNESS_CLASSES.thin;

    return (
      <hr
        className={`${styleClass} ${thicknessClass} my-4 ${!color ? 'border-gray-200 dark:border-gray-700' : ''}`}
        style={color ? { borderColor: color } : undefined}
      />
    );
  },
};

export default Divider;
