import { jsx as r } from "react/jsx-runtime";
import { Tabs as c, Tab as d } from "@mui/material";
import { styled as m } from "../Theme/index.js";
const b = "index", u = {
  tabs: `${b}-tabs`,
  tab: `${b}-tab`
}, v = m(c)(({ theme: t }) => ({
  [`& .${u.tabs}`]: {},
  [`& .${u.tab}`]: {
    fontSize: "0.875rem",
    [t.breakpoints.up("md")]: {
      fontSize: "1rem"
    }
  }
}));
function f({
  tabs: t,
  current: n,
  onChange: e,
  iconPosition: s = void 0,
  enableTabClick: l = !1,
  ...o
}) {
  return /* @__PURE__ */ r(
    c,
    {
      scrollButtons: "auto",
      value: n,
      onChange: (a, i) => !l && e(i),
      ...o,
      variant: "scrollable",
      sx: {
        minHeight: "auto",
        ".MuiTabs-scrollButtons.Mui-disabled": {
          opacity: 0.3,
          cursor: "not-allowed",
          pointerEvents: "auto"
        },
        ".MuiTabs-scroller": {
          borderRadius: "100vw"
        },
        ".MuiTabs-flexContainer": {
          borderRadius: "100vw",
          backgroundColor: "grey.100",
          padding: 0.5,
          display: "inline-flex",
          columnGap: 0.25,
          maxWidth: "100%",
          overflowX: "auto"
        },
        ".MuiTab-root": {
          borderRadius: "100vw",
          border: "1px solid transparent",
          minHeight: "auto",
          lineHeight: 1,
          py: 1,
          color: "text.secondary",
          fontSize: "13px",
          fontWeight: "normal",
          textTransform: "capitalize",
          transition: "background-color 0.2s ease",
          "&.Mui-selected, &:hover": {
            backgroundColor: "action.selected",
            borderColor: "grey.100",
            color: "grey.A700"
          }
        },
        ".MuiTabs-indicator": {
          display: "none"
        },
        ...o.sx
      },
      children: t.map((a) => /* @__PURE__ */ r(
        d,
        {
          className: u.tab,
          value: a.value,
          label: a.label,
          icon: a.icon,
          iconPosition: s,
          onClick: () => l && e(a.value)
        },
        a.value
      ))
    }
  );
}
function y({
  tabs: t,
  current: n,
  onChange: e,
  iconPosition: s = void 0,
  enableTabClick: l = !1,
  ...o
}) {
  return /* @__PURE__ */ r(
    c,
    {
      scrollButtons: "auto",
      value: n,
      onChange: (a, i) => !l && e(i),
      ...o,
      variant: "scrollable",
      sx: {
        minHeight: "auto",
        ".MuiTabs-scrollButtons.Mui-disabled": {
          opacity: 0.3,
          cursor: "not-allowed",
          pointerEvents: "auto"
        },
        ".MuiTabs-scroller": o.orientation !== "vertical" ? {
          "&::after": {
            content: '""',
            display: "block",
            position: "sticky",
            left: 0,
            zIndex: -1,
            width: "100%",
            height: "1px",
            backgroundColor: "grey.300"
          }
        } : {},
        ".MuiTabs-flexContainer": {
          display: "inline-flex",
          columnGap: 2.5,
          px: 0,
          pb: 0.5
        },
        ".MuiTab-root": {
          border: "1px solid transparent",
          minHeight: "auto",
          lineHeight: 1,
          py: 1,
          px: 0,
          color: "text.secondary",
          fontSize: "14px",
          fontWeight: 500,
          textTransform: "capitalize",
          minWidth: "auto",
          "&.Mui-selected, &:hover": {
            color: "primary.main"
          }
        },
        ".MuiTabs-indicator": {
          height: "1px",
          backgroundColor: "primary.main"
        },
        ...o.sx
      },
      children: t.map((a) => /* @__PURE__ */ r(
        d,
        {
          className: u.tab,
          value: a.value,
          label: a.label,
          icon: a.icon,
          iconPosition: s,
          onClick: () => l && e(a.value)
        },
        a.value
      ))
    }
  );
}
function T({
  tabs: t,
  current: n,
  onChange: e,
  variant: s = void 0,
  iconPosition: l = void 0,
  enableTabClick: o = !1,
  ...a
}) {
  return s === "card" ? /* @__PURE__ */ r(
    f,
    {
      ...a,
      tabs: t,
      current: n,
      enableTabClick: o,
      onChange: e,
      iconPosition: l
    }
  ) : s === "line" ? /* @__PURE__ */ r(
    y,
    {
      ...a,
      tabs: t,
      current: n,
      enableTabClick: o,
      onChange: e,
      iconPosition: l
    }
  ) : /* @__PURE__ */ r(
    v,
    {
      scrollButtons: "auto",
      variant: "scrollable",
      value: n,
      onChange: (i, p) => !o && e(p),
      indicatorColor: "primary",
      ...a,
      className: [u.tabs, a.className || ""].join(" "),
      children: t.map((i) => /* @__PURE__ */ r(
        d,
        {
          className: u.tab,
          value: i.value,
          label: i.label,
          icon: i.icon,
          iconPosition: l,
          onClick: () => o && e(i.value)
        },
        i.value
      ))
    }
  );
}
export {
  T as default
};
