import { jsxs as a, jsx as e } from "react/jsx-runtime";
import o, { useState as g } from "react";
import { isEmpty as u } from "es-toolkit/compat";
import c from "../../utils/classNames.js";
import f from "./MobileHeaderModal.js";
const z = (r) => {
  const { navItems: s = [], label: n, className: d } = r, [l, m] = g(!1), h = () => m(!l), i = !u(s), p = c(
    "MobileSubmoduleNavigation",
    "display-flex gap-10 align-items-center",
    "padding-x-10",
    "cursor-pointer",
    d
  ), x = c(
    i ? "text-size-12 text-color-dark line-height-14" : "text-size-16 line-height-16 text-color-darkest text-medium text-uppercase",
    "width-100pct ellipsis-1"
  );
  return /* @__PURE__ */ a("div", { className: p, onClick: h, children: [
    /* @__PURE__ */ a("div", { className: "flex-1-1 display-flex flex-column align-items-center width-0", children: [
      /* @__PURE__ */ e("div", { className: x, children: n }),
      /* @__PURE__ */ e("div", { className: "text-medium width-100pct", children: s.map((t) => /* @__PURE__ */ e("div", { className: "ellipsis-1", children: o.cloneElement(t.route, {
        className: "text-size-16 line-height-16 text-color-darkest text-decoration-none",
        onClick: (N) => N.preventDefault()
      }) }, t.key)) })
    ] }),
    i && /* @__PURE__ */ e("div", { className: "text-size-16 text-color-dark", children: /* @__PURE__ */ e("span", { className: "rioglyph rioglyph-chevron-down" }) }),
    i && /* @__PURE__ */ e(f, { show: l, children: s.map((t) => /* @__PURE__ */ e("div", { className: "margin-y-15 font-size-20", children: o.cloneElement(t.route, {
      className: "text-size-20 text-color-darker"
    }) }, t.key)) })
  ] });
};
export {
  z as default
};
//# sourceMappingURL=MobileSubmoduleNavigation.js.map
