// Sparkline de tendance — une `polyline` SVG, sans librairie de charting : douze points n'ont
// besoin ni d'axes, ni d'échelle affichée, ni d'interaction, et une dépendance coûterait des
// dizaines de kilo-octets pour ce seul tracé.
//
// **Une courbe par source, jamais une courbe mélangée** : le panneau de détail en rend une
// dans la section de chaque source, avec son échelle propre. Mêler les volumes de deux
// fournisseurs dans un trait unique dessinerait un zigzag qui ne décrit aucune tendance
// réelle — c'est exactement ce que la décision A5 interdit de fabriquer.
//
// La teinte est l'accent de marque, comme partout ailleurs.

const WIDTH = 168;
const HEIGHT = 32;

export function Sparkline({ values, label }: { values: number[]; label: string }) {
  if (values.length < 2) return null;
  const max = Math.max(...values);
  const min = Math.min(...values);
  const span = max - min || 1;
  const points = values
    .map((value, index) => {
      const x = (index / (values.length - 1)) * WIDTH;
      const y = HEIGHT - ((value - min) / span) * HEIGHT;
      return `${x.toFixed(1)},${y.toFixed(1)}`;
    })
    .join(" ");

  return (
    <svg
      viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
      className="text-brand-text h-8 w-full"
      preserveAspectRatio="none"
    >
      <title>{label}</title>
      <polyline
        points={points}
        fill="none"
        stroke="currentColor"
        strokeWidth="1.5"
        vectorEffect="non-scaling-stroke"
      />
    </svg>
  );
}