interface StatCardProps {
  title: string;
  value: string | number;
  subtitle?: string;
  color?: string;
  icon?: React.ReactNode;
}

export function StatCard({ title, value, subtitle, color = "#3b82f6", icon }: StatCardProps) {
  return (
    <div className="p-6 bg-white rounded-lg border-2 border-gray-200 hover:shadow-md transition-shadow">
      <div className="flex items-start justify-between">
        <div className="flex-1">
          <p className="text-sm font-medium text-gray-600 mb-1">{title}</p>
          <p className="text-3xl font-bold" style={{ color }}>
            {value}
          </p>
          {subtitle && (
            <p className="text-sm text-gray-500 mt-1">{subtitle}</p>
          )}
        </div>
        {icon && (
          <div className="p-3 rounded-lg" style={{ backgroundColor: `${color}20` }}>
            {icon}
          </div>
        )}
      </div>
    </div>
  );
}