import { jsxs, jsx } from "react/jsx-runtime";
import React__default, { useRef, useState, useLayoutEffect } from "react";
/* empty css                          */
function DynamicLayout({
  leftPanel,
  rightContent,
  leftPanelWidth,
  className = "",
  showStepper = false,
  ...props
}) {
  const contentRef = useRef(null);
  const [hasScroll, setHasScroll] = useState(false);
  useLayoutEffect(() => {
    const el = contentRef.current;
    const checkScroll = () => {
      if (!el) return;
      setHasScroll(el.scrollHeight > el.clientHeight);
    };
    checkScroll();
    window.addEventListener("resize", checkScroll);
    const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(checkScroll) : null;
    if (resizeObserver && el) resizeObserver.observe(el);
    const mutationObserver = typeof MutationObserver !== "undefined" ? new MutationObserver(checkScroll) : null;
    if (mutationObserver && el) {
      mutationObserver.observe(el, {
        childList: true,
        subtree: true,
        characterData: true,
        attributes: true
      });
    }
    return () => {
      window.removeEventListener("resize", checkScroll);
      resizeObserver == null ? void 0 : resizeObserver.disconnect();
      mutationObserver == null ? void 0 : mutationObserver.disconnect();
    };
  }, [rightContent]);
  return /* @__PURE__ */ jsxs("div", { className: `dynamic-layout-container ${className}`.trim(), ...props, children: [
    /* @__PURE__ */ jsx("div", { className: "left-panel", style: { width: leftPanelWidth }, children: leftPanel }),
    /* @__PURE__ */ jsx("div", { className: `right-content ${showStepper ? "with-stepper" : ""}`, children: React__default.cloneElement(rightContent, { contentRef, hasScroll }) })
  ] });
}
DynamicLayout.displayName = "DynamicLayout";
export {
  DynamicLayout
};
