// components/Drawer.js
import { $html } from "sigpro";
import { ui, val, joinClass } from "../core/utils.js";

export const Drawer = (props) => {
  const { ui: uiProps, class: className, id, open, content, side, ...rest } = props;

  const dynamicClasses = [
    ui('drawer', uiProps),
    className
  ].filter(Boolean).join(' ');

  const classes = joinClass("drawer", dynamicClasses);

  return $html("div", { ...rest, class: classes }, [
    $html("input", {
      id,
      type: "checkbox",
      class: "drawer-toggle",
      checked: val(open),
    }),
    $html("div", { class: "drawer-content" }, content),
    $html("div", { class: "drawer-side" }, [
      $html("label", { for: id, class: "drawer-overlay", onclick: () => open?.(false) }),
      $html("div", { class: "min-h-full bg-base-200 w-80" }, side),
    ]),
  ]);
};