<script>
  let { values = [], color = "var(--signal)" } = $props();

  const W = 100;
  const H = 28;
  const PAD = 2;

  const points = $derived.by(() => {
    if (!values || values.length === 0) return "";
    if (values.length === 1) {
      const y = H / 2;
      return `${PAD},${y} ${W - PAD},${y}`;
    }
    let min = values[0];
    let max = values[0];
    for (let i = 1; i < values.length; i++) {
      if (values[i] < min) min = values[i];
      if (values[i] > max) max = values[i];
    }
    const range = max - min || 1;
    const step = (W - PAD * 2) / (values.length - 1);
    return values
      .map((v, i) => {
        const x = PAD + i * step;
        const y = H - PAD - ((v - min) / range) * (H - PAD * 2);
        return `${x.toFixed(2)},${y.toFixed(2)}`;
      })
      .join(" ");
  });
</script>

{#if points}
  <svg class="sparkline" viewBox="0 0 {W} {H}" preserveAspectRatio="none" aria-hidden="true">
    <polyline
      points={points}
      fill="none"
      stroke={color}
      stroke-width="1.5"
      stroke-linecap="round"
      stroke-linejoin="round"
      vector-effect="non-scaling-stroke"
    />
  </svg>
{/if}

<style>
  .sparkline { display: block; width: 100%; height: 100%; }
</style>
