import { cn } from "@/lib/utils";

/* Linea di tendenza senza assi, per KPI e tabella aziende. */
export function Sparkline({ values, tone = "neutral", height = 24, className }: {
  values: (number | null)[];
  tone?: "positive" | "negative" | "primary" | "neutral";
  height?: number;
  className?: string;
}) {
  const pts = values.map((v, i) => ({ i, v })).filter((p): p is { i: number; v: number } => p.v !== null);
  if (pts.length < 2) return <div style={{ height }} className={className} />;
  const min = Math.min(...pts.map((p) => p.v));
  const max = Math.max(...pts.map((p) => p.v));
  const span = max - min || 1;
  const w = values.length - 1;
  const points = pts.map((p) => `${p.i},${(height - 2 - ((p.v - min) / span) * (height - 4)).toFixed(2)}`).join(" ");
  const stroke = { positive: "stroke-positive", negative: "stroke-negative", primary: "stroke-primary", neutral: "stroke-muted-foreground" }[tone];
  return (
    <svg viewBox={`0 0 ${w} ${height}`} preserveAspectRatio="none" style={{ height }} className={cn("block w-full", className)} aria-hidden>
      <polyline points={points} fill="none" className={stroke} strokeWidth={1.5} vectorEffect="non-scaling-stroke" strokeLinejoin="round" />
    </svg>
  );
}