import React, { ReactNode, MouseEventHandler } 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 ResponsiveSpacing {
  base?: Spacing;
  md?: Spacing;
  lg?: Spacing;
}

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

export function Card({ 
  children, 
  className = '', 
  onClick,
  variant = 'default',
  ...props
}: CardProps) {
  const baseClasses = 'rounded-none transition-all duration-150 ease-smooth';
  
  const variantClasses = {
    default: 'bg-panel-gray border border-border-gray shadow-card',
    outline: 'bg-transparent border border-border-gray',
    ghost: 'bg-transparent border-none'
  };

  const classes = [
    baseClasses,
    variantClasses[variant],
    onClick ? 'cursor-pointer hover:bg-border-gray/30' : '',
    className
  ].filter(Boolean).join(' ');
  
  // Default padding if none provided
  const hasPadding = props.p !== undefined || props.px !== undefined || props.py !== undefined || 
                    props.pt !== undefined || props.pb !== undefined || props.pl !== undefined || props.pr !== undefined;
  
  return (
    <Box 
      className={classes} 
      onClick={onClick} 
      p={hasPadding ? undefined : 4}
      {...props}
    >
      {children}
    </Box>
  );
}
