import { jsx as a } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
import { TypographyVariant as y, TypographyElement as b } from "../Typography/types.js";
import u from "../../../hooks/useTabbedControl.js";
import $ from "../Typography/Typography.js";
/* empty css                      */
import h from "../../../core/Context/preact/useCoreContext.js";
function _({
  ["aria-label"]: i,
  activeItem: l,
  items: r,
  onChange: s
}) {
  const { activeIndex: d, onClick: c, onKeyDown: m, refs: p, uniqueId: n } = u({ onChange: s, options: r, activeOption: l }), { i18n: g } = h();
  return /* @__PURE__ */ a("div", { children: [
    /* @__PURE__ */ a("div", { role: "radiogroup", className: "adyen-pe-segmented-control", "aria-label": i, children: r.map((e, o) => {
      const t = d === o;
      return /* @__PURE__ */ a(
        "button",
        {
          role: "radio",
          name: e.id,
          ref: p[o],
          id: `item:${n}-${e.id}`,
          className: "adyen-pe-segmented-control__item",
          "aria-checked": t,
          "aria-controls": `segment:${n}-${e.id}`,
          onClick: t ? void 0 : c,
          onKeyDown: m,
          disabled: e.disabled,
          tabIndex: t ? 0 : -1,
          children: /* @__PURE__ */ a(
            $,
            {
              el: b.SPAN,
              variant: y.BODY,
              className: "adyen-pe-segmented-control__item-label",
              stronger: !0,
              children: g.get(e.label)
            }
          )
        },
        `item:${n}-${e.id}`
      );
    }) }),
    /* @__PURE__ */ a("div", { className: "adyen-pe-segmented-content-container", children: r.map((e, o) => /* @__PURE__ */ a(
      "div",
      {
        id: `segment:${n}-${e.id}`,
        className: "adyen-pe-segmented-content",
        "aria-labelledby": `item:${n}-${e.id}`,
        hidden: d !== o,
        children: e.content
      },
      `segment:${n}-${e.id}`
    )) })
  ] });
}
export {
  _ as default
};
