"use client";

import { toBeatCells, toSparkline } from "@/lib/pace/beatmap";

interface BeatMapProps {
  beatMap: number[];
}

// 爽点节拍图（UX §6.4）：beat_map(int 序列) → ▁▃▅ 柱状条。
// 渲染为定高柱（CSS height%），同时给文本 sparkline 作无障碍标签（a11y §10）。
// 静态高度，无动画 → 天然尊重 prefers-reduced-motion。
export function BeatMap({ beatMap }: BeatMapProps) {
  const cells = toBeatCells(beatMap);
  if (cells.length === 0) {
    return <span className="text-xs text-ink-soft/60">无节拍数据</span>;
  }
  const spark = toSparkline(beatMap);
  return (
    <div className="max-w-full overflow-x-auto pb-1">
      <div
        className="flex h-12 min-w-full items-end gap-0.5"
        role="img"
        aria-label={`爽点节拍图 ${spark}`}
      >
        {cells.map((cell, i) => (
          <div
            key={i}
            className="min-w-[4px] flex-1 rounded-t bg-cinnabar/70"
            style={{ height: `${cell.heightPct}%` }}
            title={`第${i + 1}拍 强度${cell.value}`}
          />
        ))}
      </div>
    </div>
  );
}