import { jsxs as f, jsx as i } from "react/jsx-runtime";
import v from "@mui/material/Tabs";
import x from "@mui/material/Tab";
import c from "@mui/material/Box";
import H from "@mui/material/IconButton";
import z from "@mui/icons-material/Close";
import S from "@mui/icons-material/Add";
function T({
  tabs: a,
  value: r,
  onChange: t,
  variant: s = "line",
  size: n = "md",
  closable: g = !1,
  onClose: u,
  scrollable: d = !1,
  addButton: h = !1,
  onAdd: y,
  sx: l
}) {
  const p = {
    xs: { fontSize: "0.6875rem", minHeight: 28, py: 0.25 },
    sm: { fontSize: "0.75rem", minHeight: 32, py: 0.5 },
    md: { fontSize: "0.8125rem", minHeight: 40, py: 1 },
    lg: { fontSize: "0.875rem", minHeight: 48, py: 1.5 },
    xl: { fontSize: "1rem", minHeight: 56, py: 2 }
  }, o = p[n] || p.md, b = {
    line: {},
    pill: {
      "& .MuiTabs-indicator": { display: "none" },
      "& .MuiTab-root": {
        borderRadius: "999px",
        minHeight: o.minHeight,
        "&.Mui-selected": {
          bgcolor: "var(--ov-accent-subtle)",
          color: "var(--ov-accent-fg)"
        }
      }
    },
    segmented: {
      bgcolor: "var(--ov-bg-surface-inset)",
      borderRadius: "8px",
      p: 0.5,
      minHeight: "auto",
      "& .MuiTabs-indicator": { display: "none" },
      "& .MuiTab-root": {
        borderRadius: "6px",
        minHeight: o.minHeight - 8,
        "&.Mui-selected": {
          bgcolor: "var(--ov-bg-surface)",
          color: "var(--ov-fg-base)",
          boxShadow: "var(--ov-shadow-sm)"
        }
      }
    }
  };
  return /* @__PURE__ */ f(c, { sx: { display: "flex", alignItems: "center", ...typeof l == "object" && !Array.isArray(l) ? l : {} }, children: [
    /* @__PURE__ */ i(
      v,
      {
        value: r,
        onChange: (e, m) => t(m),
        variant: d ? "scrollable" : "standard",
        scrollButtons: d ? "auto" : !1,
        sx: {
          minHeight: o.minHeight,
          ...b[s]
        },
        children: a.map((e) => /* @__PURE__ */ i(
          x,
          {
            value: e.key,
            label: /* @__PURE__ */ f(c, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
              e.icon,
              /* @__PURE__ */ i("span", { children: e.label }),
              g && /* @__PURE__ */ i(
                z,
                {
                  sx: { fontSize: 14, ml: 0.5, opacity: 0.6, "&:hover": { opacity: 1 } },
                  onClick: (m) => {
                    m.stopPropagation(), u?.(e.key);
                  }
                }
              )
            ] }),
            disabled: e.disabled,
            sx: {
              fontSize: o.fontSize,
              minHeight: o.minHeight,
              py: o.py,
              textTransform: "none",
              color: "var(--ov-fg-default)"
            }
          },
          e.key
        ))
      }
    ),
    h && /* @__PURE__ */ i(H, { size: "small", onClick: y, sx: { ml: 0.5 }, children: /* @__PURE__ */ i(S, { fontSize: "small" }) })
  ] });
}
T.displayName = "Tabs";
function M({
  value: a,
  activeValue: r,
  children: t,
  keepMounted: s = !1
}) {
  const n = a === r;
  return !n && !s ? null : /* @__PURE__ */ i(
    c,
    {
      role: "tabpanel",
      hidden: !n,
      sx: { display: n ? void 0 : "none" },
      children: t
    }
  );
}
M.displayName = "TabPanel";
export {
  M as T,
  T as a
};
