"use client";

/**
 * 미니 스파크라인. 데이터 없으면 "—" 표시 (목업 로직 그대로).
 */
export default function Sparkline({
  data,
  color = "var(--v5-primary)",
  width = 96,
  height = 18,
}: {
  data?: number[];
  color?: string;
  width?: number;
  height?: number;
}) {
  if (!data || data.length === 0) {
    return (
      <span
        style={{
          fontSize: "0.7rem",
          color: "var(--v5-text-muted)",
          fontFamily: "var(--v5-font-mono)",
        }}
      >
        —
      </span>
    );
  }
  const max = Math.max(...data, 1);
  const min = Math.min(...data, 0);
  const span = Math.max(max - min, 1);
  const pts = data
    .map((v, i) => {
      const x = (i / (data.length - 1)) * width;
      const y = height - ((v - min) / span) * (height - 3) - 1.5;
      return `${x.toFixed(1)},${y.toFixed(1)}`;
    })
    .join(" ");
  return (
    <svg width={width} height={height} style={{ display: "block" }}>
      <polyline
        points={pts}
        fill="none"
        stroke={color}
        strokeWidth="1.25"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}
