/** Inline SVG sparkline. */
export function Sparkline({
  values,
  width = 80,
  height = 24,
  color = "#60a5fa",
  fillOpacity = 0.15,
}: {
  values: number[];
  width?: number;
  height?: number;
  color?: string;
  fillOpacity?: number;
}) {
  if (values.length === 0) return null;
  if (values.length === 1) {
    return (
      <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} aria-hidden="true">
        <circle cx={width / 2} cy={height / 2} r={2} fill={color} />
      </svg>
    );
  }

  const min = Math.min(...values);
  const max = Math.max(...values);
  const span = max - min;

  const pad = 2;
  const w = width - pad * 2;
  const h = height - pad * 2;

  const points = values.map((v, i) => {
    const x = pad + (i / (values.length - 1)) * w;
    const y = span === 0 ? pad + h / 2 : pad + h - ((v - min) / span) * h;
    return [x, y] as [number, number];
  });

  const pathD = points.map((p, i) => `${i === 0 ? "M" : "L"}${p[0]},${p[1]}`).join(" ");
  const fillD = `${pathD} L${points[points.length - 1][0]},${height - pad} L${points[0][0]},${height - pad} Z`;

  const last = points[points.length - 1];

  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} aria-hidden="true">
      <path d={fillD} fill={color} fillOpacity={fillOpacity} />
      <path d={pathD} fill="none" stroke={color} strokeWidth={1.25} strokeLinecap="round" strokeLinejoin="round" />
      <circle cx={last[0]} cy={last[1]} r={1.5} fill={color} />
    </svg>
  );
}
