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

export const Drawer = (props, children) => {
  children === undefined && (children = props, props = {});
  return h("div", { ...props, class: `drawer ${props.class ?? ''}` }, children);
};

export const Sidebar = (props) => {
  const id = props.id || `drawer-${Math.random().toString(36).slice(2, 9)}`;
  return h("div", { ...props, class: `drawer ${props.class ?? ''}` }, [
    h("input", {
      id,
      type: "checkbox",
      class: "drawer-toggle",
      checked: () => (typeof props.open === "function" ? props.open() : props.open),
      onchange: (e) => typeof props.open === "function" && props.open(e.target.checked)
    }),
    h("div", { class: "drawer-content" }, props.children),
    h("div", { class: "drawer-side" }, [
      h("label", {
        for: id,
        class: "drawer-overlay",
        onclick: () => typeof props.open === "function" && props.open(false)
      }),
      h("div", { class: "min-h-full bg-base-200 w-80 p-4" },
        typeof props.content === "function" ? props.content() : props.content
      )
    ])
  ]);
};