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

export function CheckboxGroup({ items = [], value, defaultValue = [], onValueChange, className = "", children, ...props }) {
  const [internal, setInternal] = React.useState(defaultValue);
  const val = value !== undefined ? value : internal;
  const toggle = (v) => {
    const next = val.includes(v) ? val.filter((x) => x !== v) : val.concat([v]);
    if (value === undefined) setInternal(next);
    if (onValueChange) onValueChange(next);
  };
  return (
    <div role="group" className={["o-radio-group", className].filter(Boolean).join(" ")} data-slot="checkbox-group" {...props}>
      {items.map((item) => (
        <label className="o-choice" key={item.value}>
          <Checkbox checked={val.includes(item.value)} onCheckedChange={() => toggle(item.value)} disabled={item.disabled} />
          {item.label}
        </label>
      ))}
      {children}
    </div>
  );
}
