// Sparkline — small inline trend chart used in MiniStat tiles.
function Sparkline({ data, color = 'var(--accent)', width = 90, height = 28 }) {
  if (!data.length) return null;
  const max = Math.max(...data, 1);
  const min = Math.min(...data);
  const pad = 2;
  const xStep = (width - pad * 2) / (data.length - 1 || 1);
  const yOf = v => pad + (height - pad * 2) * (1 - (v - min) / (max - min || 1));
  const d = data.map((v, i) => `${i === 0 ? 'M' : 'L'} ${pad + i * xStep} ${yOf(v)}`).join(' ');
  const area = d + ` L ${pad + (data.length - 1) * xStep} ${height - pad} L ${pad} ${height - pad} Z`;
  return (
    <svg width={width} height={height} style={{ display: 'block' }}>
      <path d={area} fill={color} opacity="0.1"/>
      <path d={d} fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

Object.assign(window, { Sparkline });