import type { ReactNode } from "react";
import { cn } from "@/lib/utils";

export function StatCard({
  label, value, hint, icon, tone = "default",
}: {
  label: string; value: ReactNode; hint?: string; icon?: ReactNode;
  tone?: "default" | "primary" | "success" | "warning" | "destructive";
}) {
  const toneMap = {
    default: "text-foreground",
    primary: "text-secondary",
    success: "text-success",
    warning: "text-warning",
    destructive: "text-destructive",
  } as const;
  return (
    <div className="group relative overflow-hidden rounded-xl border border-border bg-card p-4 transition-colors duration-200 hover:border-primary/40">
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0">
          <div className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{label}</div>
          <div className={cn("mt-1.5 font-display text-2xl font-bold", toneMap[tone])}>{value}</div>
          {hint && <div className="mt-1 text-xs text-muted-foreground">{hint}</div>}
        </div>
        {icon && <div className="grid h-9 w-9 shrink-0 place-items-center rounded-md bg-surface-elevated text-secondary">{icon}</div>}
      </div>
    </div>
  );
}