import React, { ReactNode, MouseEventHandler } from 'react';

interface CardProps {
  children: ReactNode;
  className?: string;
  onClick?: MouseEventHandler<HTMLDivElement>;
  variant?: 'default' | 'highlight';
}

export function Card({ 
  children, 
  className = '', 
  onClick,
  variant = 'default'
}: CardProps) {
  const baseClasses = 'rounded-lg p-6 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 classes = [
    baseClasses,
    variantClasses[variant],
    onClick ? 'cursor-pointer hover:scale-[1.02]' : '',
    className
  ].filter(Boolean).join(' ');
  
  return (
    <div className={classes} onClick={onClick}>
      {children}
    </div>
  );
}