Text Toggle

"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

export interface TextToggleProps {
  options?: string[];
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  label?: string;
  className?: string;
}

/** Typographic toggle: options are plain mono words separated by slashes; the active one is ink with a signal underline, others muted — radio semantics with arrow keys. */
export function TextToggle({ options = ["Grid", "List", "Index"], value, defaultValue, onValueChange, label = "View", className }: TextToggleProps) {
  const [inner, setInner] = useState(defaultValue ?? options[0]);
  const current = value ?? inner;
  const pick = (i: number) => {
    const o = options[(i + options.length) % options.length]!;
    setInner(o);
    onValueChange?.(o);
    return (i + options.length) % options.length;
  };
  return (
    <div role="radiogroup" aria-label={label} className={cn("inline-flex items-center gap-2 font-da-mono text-xs tracking-da-label uppercase", className)}>
      {options.map((o, i) => (
        <span key={o} className="flex items-center gap-2">
          {i > 0 && (
            <span aria-hidden className="text-da-muted-fg">
              /
            </span>
          )}
          <button
            type="button"
            role="radio"
            aria-checked={o === current}
            tabIndex={o === current ? 0 : -1}
            onClick={() => pick(i)}
            onKeyDown={(e) => {
              const d = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
              if (!d) return;
              e.preventDefault();
              const n = pick(i + d);
              (e.currentTarget.closest("[role=radiogroup]")?.querySelectorAll("button")[n] as HTMLElement | undefined)?.focus();
            }}
            className={cn(
              "da-focus rounded-da-sm pb-0.5",
              o === current ? "border-b-2 border-da-accent text-da-fg" : "border-b-2 border-transparent text-da-muted-fg hover:text-da-fg",
            )}
          >
            {o}
          </button>
        </span>
      ))}
    </div>
  );
}

export default TextToggle;