import { jsx as e } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
/* empty css                  */
import d from "classnames";
import { Divider as t } from "../Divider/Divider.js";
import { useResponsiveContainer as h, containerQueries as b } from "../../../hooks/useResponsiveContainer.js";
import { useCallback as u } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
import f from "../Button/Button.js";
import k from "../Typography/Typography.js";
import { TypographyVariant as g } from "../Typography/types.js";
import { Icon as w } from "../Icon/Icon.js";
const i = ({ rowNumber: s, className: o }) => /* @__PURE__ */ e("div", { className: d("adyen-pe-secondary-nav__skeleton", o), children: [...Array(s)].map((c, n) => /* @__PURE__ */ e("div", { className: "adyen-pe-secondary-nav__skeleton-item" }, n)) }), I = ({
  renderHeader: s,
  className: o,
  items: c,
  activeValue: n,
  onValueChange: l,
  loading: p,
  onContentVisibilityChange: y,
  renderContent: v,
  contentVisible: m,
  renderLoadingContent: _
}) => {
  const a = h(b.down.xs), N = u(
    (r) => {
      l(r), a && y(!0);
    },
    [a, l, y]
  );
  return p ? a ? /* @__PURE__ */ e(i, { rowNumber: 3, className: "adyen-pe-secondary-nav__skeleton--content" }) : /* @__PURE__ */ e("div", { className: d("adyen-pe-secondary-nav"), children: /* @__PURE__ */ e("div", { className: "adyen-pe-secondary-nav__container", children: [
    /* @__PURE__ */ e("div", { className: "adyen-pe-secondary-nav__skeleton--aside", children: [
      /* @__PURE__ */ e(i, { rowNumber: 1 }),
      /* @__PURE__ */ e("div", { className: "adyen-pe-secondary-nav__list", children: /* @__PURE__ */ e(i, { rowNumber: 2 }) })
    ] }),
    /* @__PURE__ */ e(t, { variant: "vertical" }),
    /* @__PURE__ */ e("div", { className: "adyen-pe-secondary-nav__loading-content", children: _(n) })
  ] }) }) : /* @__PURE__ */ e("div", { className: d("adyen-pe-secondary-nav", o, { "adyen-pe-secondary-nav--mobile": a }), children: /* @__PURE__ */ e("div", { className: d("adyen-pe-secondary-nav__container", { "adyen-pe-secondary-nav__container-mobile": a }), children: [
    (!m || !a) && /* @__PURE__ */ e("aside", { className: d("adyen-pe-secondary-nav--sidebar", { "adyen-pe-secondary-nav--sidebar-mobile": a }), children: [
      s(),
      /* @__PURE__ */ e("ul", { className: d("adyen-pe-secondary-nav__list", "adyen-pe-secondary-nav__menu-list"), children: c.map((r) => /* @__PURE__ */ e("li", { className: "adyen-pe-secondary-nav__list-item", children: /* @__PURE__ */ e(
        f,
        {
          "aria-selected": r.value === n,
          className: d("adyen-pe-secondary-nav__item", {
            "adyen-pe-secondary-nav__item--active": r.value === n,
            "adyen-pe-secondary-nav__item--mobile": a
          }),
          iconRight: a ? /* @__PURE__ */ e(w, { name: "chevron-right" }) : void 0,
          onClick: N.bind(null, r),
          children: /* @__PURE__ */ e(
            k,
            {
              variant: g.BODY,
              stronger: !0,
              "data-testid": "typography",
              className: "adyen-pe-secondary-nav__item-label",
              children: r.label
            }
          )
        }
      ) }, r.label)) })
    ] }),
    !a && /* @__PURE__ */ e(t, { variant: "vertical" }),
    m && n && v(n)
  ] }) });
};
export {
  I as SecondaryNav
};
