import { Card, CardContent } from '@/components/ui/card';
import { LucideIcon } from 'lucide-react';

interface StatsCardProps {
  label: string;
  value: string | number;
  icon: LucideIcon;
  iconColor: string;
  gradient: string;
  textColor: string;
  valueColor: string;
  testId?: string;
  onClick?: () => void;
}

export function StatsCard({
  label,
  value,
  icon: Icon,
  iconColor,
  gradient,
  textColor,
  valueColor,
  testId = 'stats-card',
  onClick
}: StatsCardProps) {
  return (
    <Card 
      className={`${gradient} border transition-shadow ${onClick ? 'cursor-pointer hover:shadow-lg' : 'hover:shadow-md'}`}
      data-testid={testId}
      onClick={onClick}
    >
      <CardContent className="p-3 sm:p-4">
        <div className="flex items-center justify-between">
          <div>
            <p 
              className={`text-xs sm:text-sm font-medium ${textColor}`}
              data-testid={`${testId}-label`}
            >
              {label}
            </p>
            <p 
              className={`text-xl sm:text-2xl font-bold ${valueColor}`}
              data-testid={`${testId}-value`}
            >
              {value}
            </p>
          </div>
          <Icon 
            className={`w-6 h-6 sm:w-8 sm:h-8 ${iconColor}`}
            data-testid={`${testId}-icon`}
          />
        </div>
      </CardContent>
    </Card>
  );
}

