import React, { ReactNode, MouseEventHandler, HTMLAttributes } from 'react';
import { Box, BoxProps } from './Box';

type Spacing = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;

interface CardProps extends Omit<BoxProps<'div'>, 'children' | 'className' | 'onClick'> {
  children: ReactNode;
  className?: string;
  onClick?: MouseEventHandler<HTMLDivElement>;
  variant?: 'default' | 'highlight';
  p?: Spacing | any;
  px?: Spacing | any;
  py?: Spacing | any;
  pt?: Spacing | any;
  pb?: Spacing | any;
  pl?: Spacing | any;
  pr?: Spacing | any;
}

export function Card({ 
  children, 
  className = '', 
  onClick,
  variant = 'default',
  p, px, py, pt, pb, pl, pr,
  ...props
}: CardProps) {
  const baseClasses = 'rounded-lg shadow-card border duration-200';
  
  const variantClasses = {
    default: 'bg-iron-gray border-charcoal-outline',
    highlight: 'bg-gradient-to-r from-blue-900/20 to-blue-700/10 border-blue-500/30'
  };

  const spacingMap: Record<number, string> = {
    0: '0', 0.5: '0.5', 1: '1', 1.5: '1.5', 2: '2', 2.5: '2.5', 3: '3', 3.5: '3.5', 4: '4',
    5: '5', 6: '6', 7: '7', 8: '8', 9: '9', 10: '10', 11: '11', 12: '12', 14: '14',
    16: '16', 20: '20', 24: '24', 28: '28', 32: '32', 36: '36', 40: '40', 44: '44',
    48: '48', 52: '52', 56: '56', 60: '60', 64: '64', 72: '72', 80: '80', 96: '96'
  };
  
  const classes = [
    baseClasses,
    variantClasses[variant],
    onClick ? 'cursor-pointer hover:scale-[1.02]' : '',
    p !== undefined ? `p-${spacingMap[p]}` : (px === undefined && py === undefined && pt === undefined && pb === undefined && pl === undefined && pr === undefined ? 'p-6' : ''),
    px !== undefined ? `px-${spacingMap[px]}` : '',
    py !== undefined ? `py-${spacingMap[py]}` : '',
    pt !== undefined ? `pt-${spacingMap[pt]}` : '',
    pb !== undefined ? `pb-${spacingMap[pb]}` : '',
    pl !== undefined ? `pl-${spacingMap[pl]}` : '',
    pr !== undefined ? `pr-${spacingMap[pr]}` : '',
    className
  ].filter(Boolean).join(' ');
  
  return (
    <Box className={classes} onClick={onClick as any} {...props}>
      {children}
    </Box>
  );
}