import { jsxs as n, jsx as e } from "@emotion/react/jsx-runtime";
import { useModuleDictionary as S } from "@m4l/core";
import { PATH_ICONS as r } from "../../icons.js";
import { SettingContainerStyled as g, SettingIconTitleStyled as d, SettingItemContentStyled as h } from "../../slots/SettingsLayoutSlots.js";
import { DICTIONARY as f } from "../../dictionary.js";
import { Icon as T, Typography as u } from "@m4l/base";
import { useThemeSettingsStore as C } from "@m4l/graphics";
import { SettingItem as $ } from "../SettingItem/SettingItem.js";
function b(i) {
  const { prefixPathIcon: o } = i, { themeUserSettings: m, settingsActions: s } = C((t) => t), { themeDirection: c } = m, { onChangeDirection: l } = s, { getLabel: a } = S();
  return /* @__PURE__ */ n(g, { children: [
    /* @__PURE__ */ n(d, { children: [
      /* @__PURE__ */ e(T, { src: `${o}/${r.DIRECTION}` }),
      /* @__PURE__ */ e(u, { variant: "bodyStandard", children: a(f.DIRECTION) })
    ] }),
    /* @__PURE__ */ e(h, { role: "group", "aria-label": "theme-direction-options", children: ["ltr", "rtl"].map((t, p) => {
      const I = c === t;
      return /* @__PURE__ */ e(
        $,
        {
          iconUrl: t === "ltr" ? `${o}/${r.ALIGN_LEFT}` : `${o}/${r.ALIGN_RIGHT}`,
          selected: I,
          onChange: () => l(t)
        },
        `${t}-${p}`
      );
    }) })
  ] });
}
export {
  b as default
};
