import { cn } from "@/lib/utils";
import { Sparkline } from "@/components/charts/Sparkline";

export interface KpiDelta {
  label: string; // "MoM" / "YoY"
  text: string; // già formattato: "+8.3%", "−0.7 pp", "n/a"
  tone: "positive" | "negative" | "neutral";
}

/* Card KPI: etichetta, valore compatto, sparkline facoltativa, variazioni. */
export function KpiCard({ label, value, deltas, spark, sparkTone = "positive", highlight = false, size = "lg" }: {
  label: string;
  value: string;
  deltas: KpiDelta[];
  spark?: (number | null)[];
  sparkTone?: "positive" | "negative" | "primary" | "neutral";
  highlight?: boolean;
  size?: "lg" | "md";
}) {
  return (
    <div
      className={cn(
        "flex min-w-0 flex-1 flex-col rounded-xl border bg-card",
        size === "lg" ? "gap-2 px-4 py-3.5" : "gap-1.5 px-4 py-3",
        highlight ? "border-primary/25 ring-1 ring-primary/10" : "border-border",
      )}
    >
      <div className={cn("truncate text-[11px] font-medium", highlight ? "text-primary" : "text-muted-foreground")}>{label}</div>
      <div className={cn("truncate font-semibold leading-none tracking-tight", size === "lg" ? "text-[25px]" : "text-[22px]")}>{value}</div>
      {spark && <Sparkline values={spark} tone={highlight ? "primary" : sparkTone} />}
      <div className="flex flex-wrap gap-x-2.5 gap-y-1">
        {deltas.map((d) => (
          <div key={d.label} className="flex items-baseline gap-1">
            <span
              className={cn(
                "font-mono text-xs font-semibold",
                d.tone === "positive" && "text-positive",
                d.tone === "negative" && "text-negative",
                d.tone === "neutral" && "text-muted-foreground",
              )}
            >
              {d.text}
            </span>
            <span className="text-[10px] text-muted-foreground">{d.label}</span>
          </div>
        ))}
      </div>
    </div>
  );
}