import { jsx as n, Fragment as c } from "react/jsx-runtime";
import { useRef as l, useMemo as i, useEffect as f } from "react";
import { useElementPageContext as a } from "../../contexts/ElementPageContext.js";
const d = ({ child: e }) => {
  const t = l(null);
  return f(() => {
    var o;
    return (o = t.current) == null || o.appendChild(e), () => {
      var r;
      (r = t.current) == null || r.removeChild(e);
    };
  }, [e]), /* @__PURE__ */ n("div", { ref: t });
}, h = ({ pageNumber: e }) => {
  const { elementList: t } = a(), o = l(null), r = i(() => {
    var m;
    return (m = t[e]) == null ? void 0 : m.map((u, s) => u instanceof HTMLElement ? /* @__PURE__ */ n(d, { child: u }, s) : /* @__PURE__ */ n("div", { children: u }, s));
  }, [t, e]);
  return r ? /* @__PURE__ */ n(c, { children: /* @__PURE__ */ n("div", { ref: o, "data-rp": `page-${e}-customElement`, children: r.map((m) => m) }) }) : null;
};
export {
  h as CustomElement
};
