// components/Modal.js
import { Tag, Watch } from "sigpro";

export const Modal = (props) => {
  const { class: className, open, title, children, ...rest } = props;
  let dialogRef = null;

  Watch(() => {
    const isOpen = typeof open === "function" ? open() : open;
    if (!dialogRef) return;
    isOpen ? dialogRef.showModal() : dialogRef.close();
  });

  const close = () => {
    if (typeof open === "function") open(false);
  };

  return Tag("dialog", {
    ...rest,
    ref: el => dialogRef = el,
    class: `modal ${className || ''}`.trim(),
    onclose: close,
    oncancel: close
  }, [
    Tag("div", { class: "modal-box" }, [
      title && Tag("h3", { class: "text-lg font-bold" }, title),
      children,
      Tag("div", { class: "modal-action" }, [
        props.actions || Button({ onclick: close }, "Cerrar")
      ])
    ]),
    Tag("form", { method: "dialog", class: "modal-backdrop" }, [
      Tag("button", {}, "close")
    ])
  ]);
};