// components/Collapse.js
import { Tag } from "sigpro";

export const Collapse = (props, children) => {
  const { class: className, title, name, open, ...rest } = props;

  return Tag("div", {
    ...rest,
    class: `collapse collapse-arrow bg-base-200 ${className || ''}`.trim()
  }, [
    Tag("input", {
      type: name ? "radio" : "checkbox",
      name: name,
      checked: () => typeof open === "function" ? open() : open,
      onchange: (e) => {
        if (typeof open === "function") open(e.target.checked);
      }
    }),
    Tag("div", { class: "collapse-title text-xl font-medium" }, title),
    Tag("div", { class: "collapse-content" }, children)
  ]);
};