import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

/**
 * Single-choice segmented control (the prototype's grey pill group).
 * Values are compared as strings so numbers work too.
 */
const Segmented = ({ label, value, options, onChange, disabled = false }) => (
  <ToggleGroup
    aria-label={label}
    spacing={0}
    disabled={disabled}
    value={[String(value)]}
    onValueChange={(next) => {
      const picked = next[next.length - 1];
      if (picked !== undefined) {
        const option = options.find((item) => String(item.value) === picked);
        onChange(option ? option.value : picked);
      }
    }}
    className="ino:gap-0.5 ino:rounded-lg ino:bg-muted ino:p-[3px]"
  >
    {options.map((option) => (
      <ToggleGroupItem
        key={String(option.value)}
        value={String(option.value)}
        className="ino:h-8 ino:rounded-md ino:px-3 ino:text-[13px] ino:text-muted-foreground ino:hover:bg-transparent ino:hover:text-foreground ino:aria-pressed:bg-background ino:aria-pressed:text-foreground ino:aria-pressed:shadow-xs"
      >
        {option.label}
      </ToggleGroupItem>
    ))}
  </ToggleGroup>
);

export default Segmented;