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

/**
 * The period switcher (30 days / 3 months / …) that sat hand-rolled above each
 * time-series chart. Same look, now shared, and exposed as a radio group so
 * screen readers announce the selected range.
 */
export function SegmentedControl<T extends string>({
  options,
  value,
  onChange,
  label,
  className,
}: {
  options: readonly { value: T; label: string }[];
  value: T;
  onChange: (value: NoInfer<T>) => void;
  label: string;
  className?: string;
}) {
  return (
    <div role="radiogroup" aria-label={label} className={cn("flex items-center gap-0.5", className)}>
      {options.map((o) => (
        <button
          key={o.value}
          type="button"
          role="radio"
          aria-checked={value === o.value}
          tabIndex={value === o.value ? 0 : -1}
          onClick={() => onChange(o.value)}
          onKeyDown={(event) => {
            const index = options.findIndex(option => option.value === o.value);
            const next = event.key === "ArrowRight" || event.key === "ArrowDown" ? (index + 1) % options.length
              : event.key === "ArrowLeft" || event.key === "ArrowUp" ? (index - 1 + options.length) % options.length
              : event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : null;
            if (next === null) return;
            event.preventDefault();
            onChange(options[next].value);
            const buttons = event.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>('[role="radio"]');
            buttons?.[next]?.focus();
          }}
          className={cn(
            "px-2.5 py-1 text-xs font-medium rounded-md transition-colors",
            value === o.value
              ? "bg-muted text-foreground"
              : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
          )}
        >
          {o.label}
        </button>
      ))}
    </div>
  );
}