import { $html, $if } from "sigpro";
import { tt } from "../core/i18n.js";
import { Button } from "./Button.js";

/** MODAL */
export const Modal = (props, children) => {
  const { title, buttons, open, ...rest } = props;
  const close = () => open(false);

  return $if(open, () =>
    $html("dialog", { ...rest, class: "modal modal-open" }, [
      $html("div", { class: "modal-box" }, [
        title ? $html("h3", { class: "text-lg font-bold mb-4" }, title) : null,
        typeof children === "function" ? children() : children,
        $html("div", { class: "modal-action flex gap-2" }, [
          ...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean),
          Button({ onclick: close }, tt("close")()),
        ]),
      ]),
      $html(
        "form",
        {
          method: "dialog",
          class: "modal-backdrop",
          onclick: (e) => (e.preventDefault(), close()),
        },
        [$html("button", {}, "close")],
      ),
    ]),
  );
};