import "../Pivot.css";
import { jsx } from "react/jsx-runtime";
import { Tabs } from "antd";
import { useMemo } from "react";
import { useElevation, ElevationContext } from "./internal/Elevation.js";
import { useTheme } from "./Theme/UI.js";
import "./Theme/themeUtils.js";
import "./Theme/themes.js";
const elevationBase = "Pivot_elevationBase_1e443";
const hover = "Pivot_hover_1e443";
const border = "Pivot_border_1e443";
const base = "Pivot_base_1e443";
const css = {
  "elevation-0": "Pivot_elevation-0_1e443",
  "elevation-1": "Pivot_elevation-1_1e443",
  "elevation-2": "Pivot_elevation-2_1e443",
  "elevation-3": "Pivot_elevation-3_1e443",
  "elevation-4": "Pivot_elevation-4_1e443",
  elevationBase,
  hover,
  border,
  base
};
const convertTabType = (type) => {
  switch (type) {
    case "primary":
      return "line";
    case "secondary":
      return "card";
    default:
      return "line";
  }
};
const Pivot = ({ type = "primary", items, ...props }) => {
  const {
    themeSettings: { className: themeClass }
  } = useTheme();
  const tabType = convertTabType(type);
  const { elevationClass, nextElevation } = useElevation();
  const classes = [themeClass, css.base, elevationClass];
  const elevatedItems = useMemo(
    () => items == null ? void 0 : items.map((item) => ({
      ...item,
      children: /* @__PURE__ */ jsx(ElevationContext.Provider, { value: nextElevation, children: item.children })
    })),
    [items, nextElevation]
  );
  return /* @__PURE__ */ jsx(
    Tabs,
    {
      className: classes.join(" "),
      items: elevatedItems,
      popupClassName: themeClass,
      type: tabType,
      ...props
    }
  );
};
export {
  Pivot as default
};
