import React from "react";
import { Toggle } from "./Toggle.jsx";

export function ToggleGroup({ variant = "default", size = "default", orientation = "horizontal", value, defaultValue = [], onValueChange, toggleMultiple = true, items = [], className = "", children, ...props }) {
  const [internal, setInternal] = React.useState(defaultValue);
  const val = value !== undefined ? value : internal;
  const select = (v) => {
    let next;
    if (toggleMultiple) next = val.includes(v) ? val.filter((x) => x !== v) : val.concat([v]);
    else next = val.includes(v) ? [] : [v];
    if (value === undefined) setInternal(next);
    if (onValueChange) onValueChange(next);
  };
  const cls = ["o-group", orientation === "vertical" ? "o-group--vertical" : "", className].filter(Boolean).join(" ");
  return (
    <div className={cls} role="group" data-slot="toggle-group" data-orientation={orientation} {...props}>
      {items.map((item) => (
        <Toggle key={item.value} variant={variant === "default" ? "outline" : variant} size={size} pressed={val.includes(item.value)} onPressedChange={() => select(item.value)} aria-label={item.label}>
          {item.icon}
          {item.text}
        </Toggle>
      ))}
      {children}
    </div>
  );
}

export function ToggleGroupSeparator({ orientation = "vertical", className = "" }) {
  return <div className={["o-separator", className].filter(Boolean).join(" ")} data-slot="separator" data-orientation={orientation} />;
}
