"use client";
import { jsxs as i, jsx as e } from "react/jsx-runtime";
import { Select as s } from "./select.js";
import { Tooltip as t } from "./tooltip.js";
import { setCurrentBreakpoint as p } from "../../store/builder-slice.js";
import { getCurrentBreakpoint as f } from "../../../../../store/selectors.js";
import { Breakpoint as r } from "../../types/responsive.js";
import { useAppDispatch as g } from "../../hooks/use-app-dispatch.js";
import { useAppSelector as u } from "../../hooks/use-app-selector.js";
import { classNames as a } from "../../utils/index.js";
import { FaTabletAlt as n, FaMobileAlt as c } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/fa/index.js";
import { FiMonitor as o } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/fi/index.js";
const M = ({ className: h }) => {
  const l = u(f), d = g();
  return /* @__PURE__ */ i(
    s,
    {
      onValueChange: (m) => {
        d(p(m));
      },
      value: l,
      defaultValue: r.DESKTOP,
      children: [
        /* @__PURE__ */ i(
          s.Trigger,
          {
            className: a("h-3 w-7 border-0 p-1 focus:ring-0 focus:ring-offset-0", h),
            chevronDown: !1,
            children: [
              l === r.DESKTOP && /* @__PURE__ */ i(t, { children: [
                /* @__PURE__ */ e(t.Trigger, { asChild: !0, children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(o, { className: "text-slate-500" }) }) }),
                /* @__PURE__ */ e(t.Content, { side: "right", children: "Desktop" })
              ] }),
              l === r.TABLET && /* @__PURE__ */ i(t, { children: [
                /* @__PURE__ */ e(t.Trigger, { asChild: !0, children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(n, { className: "text-slate-500" }) }) }),
                /* @__PURE__ */ e(t.Content, { side: "right", children: "Tablet" })
              ] }),
              l === r.MOBILE && /* @__PURE__ */ i(t, { children: [
                /* @__PURE__ */ e(t.Trigger, { asChild: !0, children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(c, { className: "text-slate-500" }) }) }),
                /* @__PURE__ */ e(t.Content, { side: "right", children: "Mobile" })
              ] })
            ]
          }
        ),
        /* @__PURE__ */ e(s.Content, { alignOffset: 0, sideOffset: -23, className: "min-w-[30px] border-0", children: /* @__PURE__ */ i(s.Group, { children: [
          /* @__PURE__ */ e(
            s.Item,
            {
              className: "flex justify-center px-0 py-1.5",
              value: r.DESKTOP,
              showCheck: !1,
              children: /* @__PURE__ */ i(t, { children: [
                /* @__PURE__ */ e(t.Trigger, { className: "px-1", children: /* @__PURE__ */ e(
                  o,
                  {
                    className: a("text-slate-500", {
                      "text-slate-800": l === r.DESKTOP
                    })
                  }
                ) }),
                /* @__PURE__ */ e(t.Content, { side: "right", children: "Desktop" })
              ] })
            }
          ),
          /* @__PURE__ */ e(
            s.Item,
            {
              className: "flex justify-center px-0 py-1.5",
              value: r.TABLET,
              showCheck: !1,
              children: /* @__PURE__ */ i(t, { children: [
                /* @__PURE__ */ e(t.Trigger, { className: "px-1", children: /* @__PURE__ */ e(
                  n,
                  {
                    className: a("text-slate-500", {
                      "text-slate-800": l === r.TABLET
                    })
                  }
                ) }),
                /* @__PURE__ */ e(t.Content, { side: "right", children: "Tablet" })
              ] })
            }
          ),
          /* @__PURE__ */ e(
            s.Item,
            {
              className: "flex justify-center px-0 py-1.5",
              value: r.MOBILE,
              showCheck: !1,
              children: /* @__PURE__ */ i(t, { children: [
                /* @__PURE__ */ e(t.Trigger, { className: "px-1", children: /* @__PURE__ */ e(
                  c,
                  {
                    className: a("text-slate-500", {
                      "text-slate-800": l === r.MOBILE
                    })
                  }
                ) }),
                /* @__PURE__ */ e(t.Content, { side: "right", children: "Mobile" })
              ] })
            }
          )
        ] }) })
      ]
    }
  );
};
export {
  M as BreakpointSelector
};
//# sourceMappingURL=breakpoint-selector.js.map
