import type { LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

/**
 * Icon-only sibling of SegmentedControl: switches a chart's visual form
 * (line/bar, donut/bubbles) rather than its data range, so it reads as a
 * distinct, smaller control next to the period switcher rather than a second
 * one of the same kind.
 */
export function ChartTypeToggle<T extends string>({
  options,
  value,
  onChange,
  label,
  className,
}: {
  options: readonly { value: T; icon: LucideIcon; 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 rounded-md border border-border/60 p-0.5 shrink-0", className)}
    >
      {options.map((o) => (
        <button
          key={o.value}
          type="button"
          role="radio"
          aria-checked={value === o.value}
          aria-label={o.label}
          tabIndex={value === o.value ? 0 : -1}
          title={o.label}
          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);
            event.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>('[role="radio"]')[next]?.focus();
          }}
          className={cn(
            "flex items-center justify-center h-6 w-6 rounded transition-colors",
            value === o.value
              ? "bg-muted text-foreground"
              : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
          )}
        >
          <o.icon size={13} strokeWidth={1.75} />
        </button>
      ))}
    </div>
  );
}