import { jsx as o, jsxs as C } from "@emotion/react/jsx-runtime";
import g from "clsx";
import { TabNavigatorContainerStyled as p, TabNavigatorPositionedContainerStyled as v, TabNavigatorIconContainerStyled as T, TabNavigatorIconStyled as h, TabNavigatorLabelStyled as I } from "../../slots/TabsNavigatorSlots.js";
import { useComponentSize as f } from "../../../../hooks/useComponentSize/index.js";
import { TABS_NAVIGATOR_CLASSES as a } from "../../constants.js";
import { TextMarquee as u } from "../TextMarquee/TextMarquee.js";
const L = (d) => {
  const {
    id: r,
    label: i,
    icon: m,
    onClick: b,
    selectedId: N,
    onChangeSelectedId: S,
    type: s = "normal"
  } = d, { currentSize: t } = f(), e = r === N, n = {
    size: t,
    selected: e
  }, l = () => {
    S?.(r), b?.();
  }, y = (c) => {
    (c.key === "Enter" || c.key === " ") && l();
  };
  return /* @__PURE__ */ o(
    p,
    {
      tabIndex: 0,
      "aria-selected": e,
      className: a.tabNavigatorContainer,
      onClick: l,
      onKeyDown: y,
      ownerState: { selected: e },
      children: /* @__PURE__ */ C(
        v,
        {
          className: g(
            a.tabNavigatorPositionedContainer,
            s === "normal" ? a.normal : a.cluster
          ),
          children: [
            /* @__PURE__ */ o(T, { className: a.tabNavigatorIconContainer, ownerState: n, children: /* @__PURE__ */ o(h, { className: a.tabNavigatorIcon, src: m, ownerState: n }) }),
            s === "normal" ? /* @__PURE__ */ o(
              u,
              {
                speed: 3,
                variant: e ? "bodyDens" : "bodyStandard",
                size: t,
                children: i
              }
            ) : /* @__PURE__ */ o(
              I,
              {
                variant: e ? "bodyDens" : "bodyStandard",
                size: t,
                ellipsis: !0,
                ownerState: n,
                className: a.tabNavigatorLabel,
                children: i
              }
            )
          ]
        }
      )
    }
  );
};
export {
  L as TabNavigatorComponent
};
