import { jsxs as W, Fragment as g, jsx as d } from "react/jsx-runtime";
/* empty css                          */
import { classNames as r } from "./index-classNames.js";
import { useState as S, useEffect as v } from "react";
import { a as c } from "./index-react-spring_web.modern.js";
import { useSpring as e } from "./index-react-spring_core.modern.js";
const N = (a) => {
  const {
    elements: s,
    isContracted: t,
    autoCloseWidth: p = -1
  } = a, [o, i] = s, [h, w] = S(window.innerWidth);
  function n() {
    w(window.innerWidth);
  }
  v(() => (window.addEventListener("resize", n), () => {
    window.removeEventListener("resize", n);
  }), []);
  const l = p < h && t, u = e({
    width: l ? o == null ? void 0 : o.contractedWidth : o == null ? void 0 : o.fullWidth,
    backgroundColor: o != null && o.backgroundColor ? o == null ? void 0 : o.backgroundColor : "var(--n000)"
  }), m = e({
    opacity: t ? 1 : 0
  });
  return W(g, {
    children: [d(c.div, {
      className: r("SplitView-left-component"),
      style: {
        ...u
      },
      children: o == null ? void 0 : o.component
    }), d(c.div, {
      className: r("SplitView-right-component"),
      style: {
        left: o == null ? void 0 : o.contractedWidth,
        width: i == null ? void 0 : i.fullWidth,
        ...m
      },
      children: i == null ? void 0 : i.component
    })]
  });
};
export {
  N as ModalSplitView
};
