import { SimpleTooltip } from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";

interface StatCardProps {
  label: string;
  value: number | string;
  icon: React.ElementType;
  gradient: string;
  tooltip: string;
  loading?: boolean;
}

export function StatCard({ label, value, icon: Icon, gradient, tooltip, loading }: StatCardProps) {
  return (
    <SimpleTooltip content={tooltip}>
      <div className={cn("rounded-2xl p-5 flex items-center gap-4 cursor-default", gradient)}>
        <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-white/20">
          <Icon className="h-5 w-5 text-white" />
        </div>
        <div className="min-w-0">
          <p className="text-xs font-medium text-white opacity-70 truncate">{label}</p>
          {loading ? (
            <div className="h-7 w-12 bg-white/30 rounded animate-pulse mt-1" />
          ) : (
            <p className="text-2xl font-bold text-white leading-tight">{value}</p>
          )}
        </div>
      </div>
    </SimpleTooltip>
  );
}