'use client';

import { useRef } from 'react';
import { MODES, type MapMode } from './modes';

/** Keyboard-navigable radiogroup (←/→ move, space/enter select). */
export function ModeSelector({ mode, onChange }: { mode: MapMode; onChange: (m: MapMode) => void }) {
  const ref = useRef<HTMLDivElement>(null);
  const onKey = (e: React.KeyboardEvent, i: number) => {
    let next = i;
    if (e.key === 'ArrowRight') next = (i + 1) % MODES.length;
    else if (e.key === 'ArrowLeft') next = (i - 1 + MODES.length) % MODES.length;
    else if (e.key === 'Home') next = 0;
    else if (e.key === 'End') next = MODES.length - 1;
    else return;
    e.preventDefault();
    onChange(MODES[next]!.id);
    (ref.current?.children[next] as HTMLElement | undefined)?.focus();
  };
  return (
    <div ref={ref} role="radiogroup" aria-label="Map mode" className="scroll-x -mx-3 flex gap-1 px-3 pb-1 sm:mx-0 sm:flex-wrap sm:px-0">
      {MODES.map((m, i) => (
        <button
          key={m.id}
          type="button"
          role="radio"
          aria-checked={mode === m.id}
          tabIndex={mode === m.id ? 0 : -1}
          onClick={() => onChange(m.id)}
          onKeyDown={(e) => onKey(e, i)}
          className={`whitespace-nowrap rounded-[3px] border px-2 py-1 text-[11px] tracking-[0.04em] ${mode === m.id ? 'border-line-2 bg-panel-2 text-ink' : 'border-line text-ink-2 hover:text-ink'}`}
        >
          {m.label}
        </button>
      ))}
    </div>
  );
}