import type { UiSeverity } from "../../types";

export interface SparklineProps {
  values?: number[];
  severity?: UiSeverity;
}

export function Sparkline({
  values = [],
  severity = "neutral",
}: SparklineProps) {
  const points = toPoints(values);

  return (
    <svg
      className="sparkline"
      data-severity={severity}
      viewBox="0 0 100 24"
      aria-hidden="true"
    >
      {points ? <polyline points={points} /> : null}
    </svg>
  );
}

function toPoints(values: number[]): string {
  if (values.length === 0) return "";
  const max = Math.max(...values, 1);
  const step = values.length > 1 ? 100 / (values.length - 1) : 100;
  return values
    .map((value, index) => {
      const x = index * step;
      const y = 24 - (Math.max(0, value) / max) * 22;
      return `${x.toFixed(2)},${y.toFixed(2)}`;
    })
    .join(" ");
}