Segmented Control

"use client";

import { useRef, useState, type KeyboardEvent, type ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface SegmentedControlOption<T extends string> {
  value: T;
  label: ReactNode;
}

export interface SegmentedControlProps<T extends string> {
  label: string;
  options: SegmentedControlOption<T>[];
  value?: T;
  defaultValue?: T;
  onChange?: (value: T) => void;
  size?: "sm" | "md";
  className?: string;
}

/** Single-choice segmented control (radio group) with arrow-key navigation. */
export function SegmentedControl<T extends string>({ label, options, value, defaultValue, onChange, size = "md", className }: SegmentedControlProps<T>) {
  const [inner, setInner] = useState<T | undefined>(defaultValue ?? options[0]?.value);
  const current = value ?? inner;
  const refs = useRef<(HTMLButtonElement | null)[]>([]);

  const select = (v: T) => {
    setInner(v);
    onChange?.(v);
  };

  function onKeyDown(e: KeyboardEvent<HTMLDivElement>) {
    const delta = e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 0;
    if (!delta) return;
    e.preventDefault();
    const idx = options.findIndex((o) => o.value === current);
    const next = options[(idx + delta + options.length) % options.length];
    if (!next) return;
    select(next.value);
    refs.current[options.indexOf(next)]?.focus();
  }

  return (
    <div role="radiogroup" aria-label={label} onKeyDown={onKeyDown} className={cn("da-stroke inline-flex bg-da-surface text-da-surface-fg shadow-da-sm", className)}>
      {options.map((o, i) => {
        const checked = o.value === current;
        return (
          <button
            key={o.value}
            ref={(el) => {
              refs.current[i] = el;
            }}
            type="button"
            role="radio"
            aria-checked={checked}
            tabIndex={checked ? 0 : -1}
            onClick={() => select(o.value)}
            className={cn(
              "da-focus da-transition flex items-center gap-2 font-da-mono font-bold tracking-da-label uppercase",
              size === "sm" ? "h-8 px-3 text-[11px]" : "h-11 px-5 text-xs",
              i > 0 && "da-stroke-l",
              checked ? "bg-da-fg text-da-bg" : "hover:bg-da-primary hover:text-da-primary-fg",
            )}
          >
            {o.label}
          </button>
        );
      })}
    </div>
  );
}

export default SegmentedControl;