import { jsx as i } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
import { TypographyVariant as y, TypographyElement as $ } from "../Typography/types.js";
import h from "../../../hooks/useTabbedControl.js";
import u from "../Typography/Typography.js";
/* empty css          */
import f from "../../../core/Context/preact/useCoreContext.js";
function x({
  ["aria-label"]: t,
  activeTab: d,
  tabs: r,
  onChange: s
}) {
  const { activeIndex: o, onClick: p, onKeyDown: c, refs: m, uniqueId: a } = h({ onChange: s, options: r, activeOption: d }), { i18n: b } = f();
  return /* @__PURE__ */ i("div", { children: [
    /* @__PURE__ */ i("div", { className: "adyen-pe-tabs", role: "tablist", "aria-orientation": "horizontal", "aria-label": t, children: r.map((e, n) => {
      const l = o === n;
      return /* @__PURE__ */ i(
        "button",
        {
          role: "tab",
          name: e.id,
          ref: m[n],
          id: `tab:${a}-${e.id}`,
          className: "adyen-pe-tabs__tab",
          "aria-controls": `panel:${a}-${e.id}`,
          "aria-selected": l,
          onClick: l ? void 0 : p,
          onKeyDown: c,
          disabled: e.disabled,
          tabIndex: l ? 0 : -1,
          children: /* @__PURE__ */ i(u, { el: $.SPAN, variant: y.BODY, className: "adyen-pe-tabs__tab-label", stronger: !0, children: b.get(e.label) })
        },
        `tab:${a}-${e.id}`
      );
    }) }),
    /* @__PURE__ */ i("div", { className: "adyen-pe-tabpanels", children: r.map((e, n) => /* @__PURE__ */ i(
      "div",
      {
        role: "tabpanel",
        id: `panel:${a}-${e.id}`,
        className: "adyen-pe-tabpanels__panel",
        "aria-labelledby": `tab:${a}-${e.id}`,
        hidden: o !== n,
        children: e.content
      },
      `panel:${a}-${e.id}`
    )) })
  ] });
}
export {
  x as default
};
