"use client";

import {
  PRESET_ORDER,
  PRESETS,
  type PresetId,
} from "yt-dlp-transcript-common/lib/homepageChart";

// The primary control: named preset chips that each set a full, valid chart
// state. A "Custom" chip lights up once any Customize control diverges from a
// preset.
export function PresetBar({
  active,
  onSelect,
}: {
  active: PresetId | "custom";
  onSelect: (id: PresetId) => void;
}) {
  return (
    <div role="group" aria-label="Chart preset" className="flex flex-wrap items-center gap-2">
      {PRESET_ORDER.map((id) => {
        const on = active === id;
        return (
          <button
            key={id}
            type="button"
            aria-pressed={on}
            title={PRESETS[id].hint}
            onClick={() => onSelect(id)}
            className={
              "rounded-[var(--radius)] border px-4 py-2 text-sm font-medium transition-all duration-150 " +
              (on
                ? "border-[var(--brand)] bg-[var(--brand-soft)] text-[var(--brand-strong)]"
                : "border-[var(--border)] text-[var(--muted-foreground)] hover:border-[var(--border-strong)] hover:text-[var(--foreground)]")
            }
          >
            {PRESETS[id].label}
          </button>
        );
      })}
      {active === "custom" && (
        <span className="rounded-[var(--radius)] border border-dashed border-[var(--border-strong)] px-4 py-2 text-sm text-[var(--faint)]">
          Custom
        </span>
      )}
    </div>
  );
}