import { cn } from "../../lib/cn";

export type SegmentedControlProps = {
  items: { label: string; value: string }[];
  /** Allow segments to move onto additional rows when the available width is limited. */
  wrap?: boolean;
  value?: string;
  onValueChange?: (value: string) => void;
};

export function SegmentedControl({
  items,
  wrap = true,
  value,
  onValueChange,
}: SegmentedControlProps) {
  const currentValue = value ?? items[0]?.value;
  return (
    <div
      className={cn(
        "flex w-full rounded-[min(var(--uhuru-radius-control),1rem)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-muted)] p-1",
        wrap ? "flex-wrap gap-1" : "",
      )}
    >
      {items.map((item) => {
        const active = item.value === currentValue;
        return (
          <button
            className={cn(
              "rounded-[calc(var(--uhuru-radius-control)-0.25rem)] px-4 py-2 text-center text-sm transition",
              wrap ? "min-w-[7rem] flex-1" : "flex-1",
              active
                ? "bg-[var(--uhuru-surface-default)] text-[var(--uhuru-text-primary)] shadow-[var(--uhuru-shadow-sm)]"
                : "text-[var(--uhuru-text-secondary)]",
            )}
            key={item.value}
            onClick={() => onValueChange?.(item.value)}
            type="button"
          >
            {item.label}
          </button>
        );
      })}
    </div>
  );
}