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

export const Modal = (props) => {
  let dialogRef = null;

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

  const close = () => typeof props.open === "function" && props.open(false);

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