type SparklineProps = {
  data: number[];
  /** Direction tint: green when up, red when down. */
  up?: boolean;
  /** S6 (A1) — explicit stroke override (a CSS color/var). Takes precedence
   *  over `up`. ROW-GRAMMAR color law: line movement is green (toward) /
   *  amber (against) / dim (flat) — red is settled-negative only. */
  color?: string;
  w?: number;
  h?: number;
};

/**
 * Tiny SVG line for line movement (§5). Green up / red down, dot on the last
 * point. Dependency-free. Data viz — the line itself never glitches.
 */
export default function Sparkline({ data, up = true, color, w = 92, h = 26 }: SparklineProps) {
  const safe = data && data.length ? data : [0, 0];
  const min = Math.min(...safe);
  const max = Math.max(...safe);
  const rng = max - min || 1;
  const pts = safe.map((v, i) => {
    const x = (i / Math.max(safe.length - 1, 1)) * w;
    const y = h - ((v - min) / rng) * (h - 4) - 2;
    return [x, y] as const;
  });
  const d = pts.map((p, i) => (i ? 'L' : 'M') + p[0].toFixed(1) + ' ' + p[1].toFixed(1)).join(' ');
  const c = color || (up ? 'var(--g-a)' : 'var(--miss)');
  const last = pts[pts.length - 1];
  return (
    <svg width={w} height={h} style={{ display: 'block', overflow: 'visible' }} aria-hidden>
      <path d={d} fill="none" stroke={c} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
      <circle cx={last[0]} cy={last[1]} r="2.2" fill={c} />
    </svg>
  );
}
