// components/Drawer.js
import { Tag } from "../sigpro.js";
import { ui } from "../core/utils.js";

/**
 * Drawer component
 * 
 * daisyUI classes used:
 * - drawer, drawer-toggle, drawer-content, drawer-side, drawer-overlay
 * - bg-base-200, w-80, min-h-full
 */
export const Drawer = (props, children) => {
  const { class: className, id, open, side, content, ...rest } = props;
  
  const drawerId = id || `drawer-${Math.random().toString(36).slice(2, 9)}`;
  
  return Tag("div", {
    ...rest,
    class: ui('drawer', className),
  }, [
    Tag("input", {
      id: drawerId,
      type: "checkbox",
      class: "drawer-toggle",
      checked: () => typeof open === "function" ? open() : open,
      onchange: (e) => {
        if (typeof open === "function") open(e.target.checked);
      }
    }),
    Tag("div", { class: "drawer-content" }, [
      typeof content === "function" ? content() : content
    ]),
    Tag("div", { class: "drawer-side" }, [
      Tag("label", { 
        for: drawerId, 
        class: "drawer-overlay",
        onclick: () => {
          if (typeof open === "function") open(false);
        }
      }),
      Tag("div", { class: "min-h-full bg-base-200 w-80" }, [
        typeof side === "function" ? side() : side
      ])
    ])
  ]);
};