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

export const Drawer = (props) => {
  const { class: className, id, open, content, children, ...rest } = props;
  
  const drawerId = id || `drawer-${Math.random().toString(36).slice(2, 9)}`;
  
  return Tag("div", {
    ...rest,
    class: `drawer ${className || ''}`.trim()
  }, [
    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" }, children),
    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 p-4" }, [
        typeof content === "function" ? content() : content
      ])
    ])
  ]);
};