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

export interface CardProps extends Omit<BoxProps<'div'>, 'children' | 'onClick'> {
  children: ReactNode;
  onClick?: MouseEventHandler<HTMLDivElement>;
  variant?: 'default' | 'outline' | 'ghost' | 'muted' | 'dark' | 'glass';
}

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',
    muted: 'bg-panel-gray/40 border border-border-gray',
    dark: 'bg-graphite-black border border-border-gray',
    glass: 'bg-graphite-black/60 backdrop-blur-md border border-border-gray'
  };

  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>
  );
}