import { cx as e } from "../../../theme/tools.js";
import { activeVariant as t, tab as n, tabVariant as r, tabs as i, tabsVariant as a } from "./backofficeTabs.css.js";
import { jsx as o } from "react/jsx-runtime";
import { useTranslation as s } from "react-i18next";
import c from "@plumile/router/routing/Link.js";
//#region src/backoffice/molecules/backoffice_tabs/BackofficeTabs.tsx
var l = ({ items: l, activeId: u, onChange: d, variant: f = "pill", ariaLabel: p, className: m }) => {
	let { t: h } = s("ui", { useSuspense: !1 });
	if (l.length === 0) return null;
	let g = l.every((e) => e.to != null), _ = p ?? h("backoffice.tabs.label", { defaultValue: "Tabs" }), v = e(i, a[f], m), y = l.map((i) => {
		let a = i.id === u, s = e(n, r[f], { [t[f]]: a });
		if (i.to != null) {
			let e;
			return a && (e = "page"), /* @__PURE__ */ o(c, {
				to: i.to,
				className: s,
				"aria-current": e,
				children: i.label
			}, i.id);
		}
		return /* @__PURE__ */ o("button", {
			type: "button",
			role: "tab",
			"aria-selected": a,
			className: s,
			onClick: () => {
				d(i.id);
			},
			children: i.label
		}, i.id);
	});
	return g ? /* @__PURE__ */ o("nav", {
		className: v,
		"aria-label": _,
		children: y
	}) : /* @__PURE__ */ o("div", {
		className: v,
		role: "tablist",
		"aria-label": _,
		children: y
	});
};
//#endregion
export { l as BackofficeTabs, l as default };

//# sourceMappingURL=BackofficeTabs.js.map