import { ChevronRight } from 'lucide-react';

interface StatisticCardProps {
  title: string;
  subtitle: string;
  value: React.ReactNode;
  icon: any;
  colorClass: string; // e.g. "red", "teal", "yellow", "blue"
  onClick?: () => void;
}

export function StatisticCard({ title, subtitle, value, icon: Icon, colorClass, onClick }: StatisticCardProps) {
  return (
    <div 
      onClick={onClick}
      className={`bg-card border border-border rounded-2xl p-5 flex flex-col justify-between h-32 relative overflow-hidden group transition-colors ${onClick ? 'cursor-pointer hover:bg-white/5' : ''}`}
    >
      <div className="flex justify-between items-start">
        <div>
          <h3 className="text-foreground font-bold text-sm">{title}</h3>
          <p className="text-muted-foreground text-[11px] mt-0.5">{subtitle}</p>
        </div>
        <div className={`w-8 h-8 rounded-lg bg-${colorClass}-500/10 text-${colorClass}-500 flex items-center justify-center`}>
          <Icon className="w-4 h-4" />
        </div>
      </div>
      <div className="text-foreground font-bold text-2xl">{value}</div>
      {onClick && (
        <ChevronRight className="absolute right-4 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
      )}
    </div>
  );
}