import Link from "next/link";
import type { ReactNode } from "react";
import { cn } from "./cn";

export interface SegmentedOption<V extends string = string> {
  value: V;
  label: ReactNode;
  /** link version (server-friendly URL state) */
  href?: string;
  title?: string;
  disabled?: boolean;
}

/**
 * Compact segmented control (view switchers, radius toggles, density modes). Server-safe when options carry `href`;
 * pass `onChange` from a client component for local state. 40 px tall under 640 px, 28–32 px from `sm`.
 */
export function SegmentedControl<V extends string>({ options, value, onChange, label, size = "sm", className, scroll = false }: { options: Array<SegmentedOption<V>>; value: V; onChange?: (v: V) => void; label: string; size?: "xs" | "sm" | "md"; className?: string; scroll?: boolean }) {
  const h = size === "md" ? "h-10 sm:h-9 px-3 text-[13px]" : size === "xs" ? "h-10 sm:h-7 px-2 text-[11.5px]" : "h-10 sm:h-8 px-2.5 text-[12.5px]";
  return (
    <div role={onChange ? "radiogroup" : "navigation"} aria-label={label} className={cn("inline-flex max-w-full items-stretch rounded-sm border border-hair-2 bg-surface p-[2px]", scroll && "overflow-x-auto no-scrollbar", className)}>
      {options.map((o) => {
        const active = o.value === value;
        const cls = cn("inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-xs font-medium transition-colors", h, active ? "bg-ink text-paper" : "text-ink-2 hover:bg-surface-2 hover:text-ink", o.disabled && "pointer-events-none opacity-40");
        if (o.href && !onChange) {
          return (
            <Link key={o.value} href={o.href} scroll={scroll} aria-current={active ? "page" : undefined} title={o.title} className={cls}>
              {o.label}
            </Link>
          );
        }
        return (
          <button key={o.value} type="button" role="radio" aria-checked={active} title={o.title} disabled={o.disabled} onClick={() => onChange?.(o.value)} className={cls}>
            {o.label}
          </button>
        );
      })}
    </div>
  );
}