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

const RADIUS_CLASSES = {
  none: 'rounded-none',
  small: 'rounded-md',
  medium: 'rounded-lg',
  large: 'rounded-xl',
};

const SHADOW_CLASSES = {
  none: '',
  small: 'shadow-sm',
  medium: 'shadow-md',
  large: 'shadow-lg',
};

const PADDING_CLASSES = {
  none: 'p-0',
  small: 'p-4',
  medium: 'p-6',
  large: 'p-8',
};

export const Card: ComponentConfig<CardProps> = {
  label: 'Card',
  fields: {
    background: {
      type: 'text',
      label: 'Background Color',
    },
    borderRadius: {
      type: 'select',
      options: [
        { label: 'None', value: 'none' },
        { label: 'Small', value: 'small' },
        { label: 'Medium', value: 'medium' },
        { label: 'Large', value: 'large' },
      ],
    },
    shadow: {
      type: 'select',
      options: [
        { label: 'None', value: 'none' },
        { label: 'Small', value: 'small' },
        { label: 'Medium', value: 'medium' },
        { label: 'Large', value: 'large' },
      ],
    },
    padding: {
      type: 'select',
      options: [
        { label: 'None', value: 'none' },
        { label: 'Small', value: 'small' },
        { label: 'Medium', value: 'medium' },
        { label: 'Large', value: 'large' },
      ],
    },
  },
  defaultProps: {
    background: '#ffffff',
    borderRadius: 'medium',
    shadow: 'medium',
    padding: 'medium',
  },
  render: ({ background, borderRadius, shadow, padding }) => {
    const radiusClass = RADIUS_CLASSES[borderRadius] || RADIUS_CLASSES.medium;
    const shadowClass = SHADOW_CLASSES[shadow] || SHADOW_CLASSES.medium;
    const paddingClass = PADDING_CLASSES[padding] || PADDING_CLASSES.medium;

    return (
      <div
        className={`${radiusClass} ${shadowClass} ${paddingClass} border border-gray-200 dark:border-gray-700`}
        style={{ backgroundColor: background }}
      >
        <DropZone zone="content" />
      </div>
    );
  },
};

export default Card;
