import { jsxs as o, jsx as t } from "@emotion/react/jsx-runtime";
import { Icon as d, Typography as g } from "@m4l/base";
import { useModuleDictionary as h } from "@m4l/core";
import { SettingContainerStyled as C, SettingIconTitleStyled as f, SettingItemContentStyled as I } from "../../slots/SettingsLayoutSlots.js";
import { DICTIONARY as T } from "../../dictionary.js";
import { PATH_ICONS as y } from "../../icons.js";
import { useThemeSettingsStore as u } from "@m4l/graphics";
import { SettingItemColor as P } from "../SettingItemColor/SettingItemColor.js";
const L = (r) => {
  const { prefixPathIcon: n } = r, { themeUserSettings: i, settingsActions: s, presetsOptionsColorMain: m } = u((e) => e), { themeColor: a } = i, { onChangeColor: l } = s, { getLabel: p } = h();
  return /* @__PURE__ */ o(C, { children: [
    /* @__PURE__ */ o(f, { children: [
      /* @__PURE__ */ t(d, { src: `${n}/${y.PALETTE}` }),
      /* @__PURE__ */ t(g, { variant: "bodyStandard", children: p(T.PRESETS) })
    ] }),
    /* @__PURE__ */ t(I, { role: "group", "aria-label": "theme-preset-options", children: m.map((e, c) => {
      const S = a === e.name;
      return /* @__PURE__ */ t(
        P,
        {
          color: e.name,
          selected: S,
          onChange: () => l(e.name)
        },
        `${e.name}-${c}`
      );
    }) })
  ] });
};
export {
  L as SettingColorPresets
};
