// components/Accordion.js
// import { Tag } from "../sigpro.js";
import { ui, val } from "../core/utils.js";

/**
 * Accordion component
 * 
 * daisyUI classes used:
 * - collapse, collapse-arrow, collapse-plus, collapse-title, collapse-content
 * - collapse-open, collapse-close
 * - bg-base-200, bg-base-100, bg-primary, bg-secondary
 * - mb-2, mt-2, rounded-box
 */
export const Accordion = (props, children) => {
  const { class: className, title, name, open, ...rest } = props;

  return Tag("div", {
    ...rest,
    class: ui('collapse collapse-arrow bg-base-200 mb-2', className),
  }, [
    Tag("input", {
      type: name ? "radio" : "checkbox",
      name: name,
      checked: val(open),
    }),
    Tag("div", { class: "collapse-title text-xl font-medium" }, title),
    Tag("div", { class: "collapse-content" }, children),
  ]);
};