import { jsxs as r, jsx as e } from "@emotion/react/jsx-runtime";
import { useModuleDictionary as g } from "@m4l/core";
import { PATH_ICONS as n } from "../../icons.js";
import { DICTIONARY as p } from "../../dictionary.js";
import { Icon as S, Typography as h } from "@m4l/base";
import { SettingContainerStyled as f, SettingIconTitleStyled as I, SettingItemContentStyled as $ } from "../../slots/SettingsLayoutSlots.js";
import { useThemeSettingsStore as y } from "@m4l/graphics";
import { SettingItem as C } from "../SettingItem/SettingItem.js";
const A = (i) => {
  const { prefixPathIcon: o } = i, { settingsActions: m, themeUserSettings: s } = y((t) => t), { onChangeMode: c } = m, { getLabel: l } = g();
  return /* @__PURE__ */ r(f, { role: "group", "aria-label": "theme-mode-options", children: [
    /* @__PURE__ */ r(I, { children: [
      /* @__PURE__ */ e(S, { src: `${o}/${n.MODE}` }),
      /* @__PURE__ */ e(h, { variant: "bodyStandard", children: l(p.MODE) })
    ] }),
    /* @__PURE__ */ e($, { children: ["light", "dark"].map((t, a) => {
      const d = s.themeMode === t;
      return /* @__PURE__ */ e(
        C,
        {
          iconUrl: t === "light" ? `${o}/${n.SUN}` : `${o}/${n.MOON}`,
          selected: d,
          onChange: () => {
            c(t);
          }
        },
        `${t}-${a}`
      );
    }) })
  ] });
};
export {
  A as SettingMode
};
