import React from "react";

export function Collapsible({ open, defaultOpen = false, onOpenChange, className = "", children }) {
  const [internal, setInternal] = React.useState(defaultOpen);
  const isOpen = open !== undefined ? open : internal;
  const set = (v) => { if (open === undefined) setInternal(v); if (onOpenChange) onOpenChange(v); };
  const ctx = { open: isOpen, setOpen: set };
  return (
    <div className={className} data-slot="collapsible" data-open={isOpen ? "" : undefined}>
      {React.Children.map(children, (child) => (React.isValidElement(child) ? React.cloneElement(child, { __col: ctx }) : child))}
    </div>
  );
}
export function CollapsibleTrigger({ __col, children }) {
  return React.cloneElement(children, { onClick: () => __col && __col.setOpen(!__col.open), "aria-expanded": __col ? __col.open : undefined });
}
export function CollapsiblePanel({ __col, className = "", children, ...props }) {
  if (!__col || !__col.open) return null;
  return <div className={className} data-slot="collapsible-panel" {...props}>{children}</div>;
}
