// Small inline SVG sparkline shared across producer + KOL phones.

function MiniSpark({ data, width = 80, height = 22, color = "var(--thaihao-primary)" }) {
  if (!data || data.length < 2) return null;
  const min = Math.min(...data);
  const max = Math.max(...data);
  const range = max - min || 1;
  const stepX = (width - 2) / (data.length - 1);
  const pts = data.map((v, i) => {
    const x = 1 + i * stepX;
    const y = height - 1 - ((v - min) / range) * (height - 2);
    return [x, y];
  });
  const line = pts.map((p, i) => (i === 0 ? `M${p[0]} ${p[1]}` : `L${p[0]} ${p[1]}`)).join(" ");
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" aria-hidden="true">
      <path d={line} fill="none" stroke={color} strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" />
      <circle cx={pts[pts.length-1][0]} cy={pts[pts.length-1][1]} r="2.2" fill={color} />
    </svg>
  );
}

window.MiniSpark = MiniSpark;