"use client";

// A compact segmented control — the unit the Customize matrix is built from.
// Touch-friendly, wraps on small screens, and can grey out individual options
// (a disabled option that happens to be active still shows, just unclickable).
export function Segmented<T extends string>({
  label,
  value,
  options,
  onChange,
}: {
  label: string;
  value: T;
  options: { value: T; label: string; disabled?: boolean }[];
  onChange: (v: T) => void;
}) {
  return (
    <div
      role="group"
      aria-label={label}
      className="inline-flex items-center rounded-[var(--radius)] border border-[var(--border)] bg-[var(--panel)] p-0.5 "
    >
      {options.map((o) => {
        const active = o.value === value;
        const disabled = !!o.disabled && !active;
        return (
          <button
            key={o.value}
            type="button"
            aria-pressed={active}
            disabled={disabled}
            onClick={() => {
              if (!disabled) onChange(o.value);
            }}
            className={
              "rounded-[var(--radius)] px-3 py-1.5 text-[0.8125rem] font-medium transition-all duration-150 " +
              (active
                ? "bg-[var(--brand-soft)] text-[var(--brand-strong)] shadow-[inset_0_0_0_1px_var(--brand-soft)]"
                : disabled
                  ? "cursor-not-allowed text-[var(--faint)] opacity-50"
                  : "text-[var(--muted-foreground)] hover:text-[var(--foreground)]")
            }
          >
            {o.label}
          </button>
        );
      })}
    </div>
  );
}