import { jsxs as c, jsx as e } from "react/jsx-runtime";
import { useCallback as p, useMemo as h } from "react";
import d from "../../providers/theme/useTheme.js";
import t from "../jtl-dropdown/types/DropdownItem.js";
import f from "../toggle-group/ToggleGroup.js";
import r from "../tooltip/Tooltip.js";
import { ToggleGroupItem as s } from "../toggle-group/TogglePrimitive.js";
import g from "../jtl-dropdown/JTLDropdown.js";
import y from "../button/Button.js";
const S = {
  system: "SunMoon",
  light: "Sun",
  dark: "Moon"
}, T = ({ variant: m, onChangeTheme: i }) => {
  const { theme: n, setTheme: a } = d(), o = p(
    (l) => {
      !l || l === n || (i ? i(l) : a(l));
    },
    [a, i, n]
  ), u = h(
    () => [
      { type: t.Label, label: "Thema" },
      { type: t.Separator },
      { type: t.Default, label: "Hell", icon: "Sun", onClick: () => o("light") },
      { type: t.Default, label: "Dunkel", icon: "Moon", onClick: () => o("dark") },
      { type: t.Default, label: "Systemeinstellungen", icon: "SunMoon", onClick: () => o("system") }
    ],
    [o]
  );
  return m === "flat" ? /* @__PURE__ */ c(f, { value: n, onChange: o, type: "single", shape: "pill", size: "xs", children: [
    /* @__PURE__ */ e(r, { content: "Systemeinstellungen", asChild: !0, children: /* @__PURE__ */ e(s, { icon: "SunMoon", value: "system" }) }),
    /* @__PURE__ */ e(r, { content: "Hell", asChild: !0, children: /* @__PURE__ */ e(s, { icon: "Sun", value: "light" }) }),
    /* @__PURE__ */ e(r, { content: "Dunkel", asChild: !0, children: /* @__PURE__ */ e(s, { icon: "Moon", value: "dark" }) })
  ] }) : /* @__PURE__ */ e(g, { menuItems: u, position: "right", children: /* @__PURE__ */ e(y, { variant: "outline", size: "iconXs", icon: S[n], "aria-label": "Toggle theme" }) });
};
T.displayName = "ThemeSwitcher";
export {
  T as default
};
//# sourceMappingURL=ThemeSwitcher.js.map
