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