"use client";
import { jsx as t, jsxs as l } from "react/jsx-runtime";
import { Tooltip as e } from "../../shared/tooltip.js";
import { setCurrentBreakpoint as p } from "../../../store/builder-slice.js";
import { getCurrentBreakpoint as m } from "../../../../../../store/selectors.js";
import { useAppDispatch as h } from "../../../hooks/use-app-dispatch.js";
import { useAppSelector as d } from "../../../hooks/use-app-selector.js";
import { classNames as o } from "../../../utils/index.js";
import { BuilderConfiguration as g } from "../../../config/builder.config.js";
const N = ({ className: i }) => {
  const n = d(m), s = h(), c = g.getBreakpoints(), a = (r) => {
    s(p(r));
  };
  return /* @__PURE__ */ t(
    "div",
    {
      className: o(
        "flex h-10 items-center rounded-sm px-2 text-lg ring-1 ring-inset ring-slate-300 transition-colors duration-150 hover:bg-slate-100 hover:ring-slate-600",
        i
      ),
      children: c.map((r) => /* @__PURE__ */ t(e, { children: /* @__PURE__ */ l(e.Trigger, { children: [
        /* @__PURE__ */ t(
          "div",
          {
            onClick: () => a(r.key),
            className: o("cursor-pointer p-2 text-slate-400 hover:text-slate-800", {
              "text-slate-800": n === r.key
            }),
            children: /* @__PURE__ */ t(r.icon, {})
          }
        ),
        /* @__PURE__ */ t(e.Content, { children: r.label })
      ] }) }, r.key))
    }
  );
};
export {
  N as BreakpointSwitch
};
//# sourceMappingURL=breakpoint-switch.js.map
