"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { Monitor, Smartphone } from "lucide-react";
import { Button } from "../../ui/button.js";
import { cn } from "../../../lib/utils/index.js";
import { sel } from "../../../lib/test/index.js";
const MOBILE_VIEWPORT_WIDTH = 375;
function ViewportToggle({ value, onChange, className }) {
  return /* @__PURE__ */ jsxs(
    "div",
    {
      "data-cy": sel("blockEditor.header.viewportToggle.container"),
      className: cn(
        "flex items-center bg-muted rounded-lg p-1",
        className
      ),
      children: [
        /* @__PURE__ */ jsx(
          Button,
          {
            variant: "ghost",
            size: "sm",
            className: cn(
              "h-7 w-7 p-0 rounded-md cursor-pointer",
              value === "mobile" && "bg-background shadow-sm"
            ),
            onClick: () => onChange("mobile"),
            "data-cy": sel("blockEditor.header.viewportToggle.mobileBtn"),
            title: "Mobile view (375px)",
            children: /* @__PURE__ */ jsx(Smartphone, { className: "h-4 w-4" })
          }
        ),
        /* @__PURE__ */ jsx(
          Button,
          {
            variant: "ghost",
            size: "sm",
            className: cn(
              "h-7 w-7 p-0 rounded-md cursor-pointer",
              value === "desktop" && "bg-background shadow-sm"
            ),
            onClick: () => onChange("desktop"),
            "data-cy": sel("blockEditor.header.viewportToggle.desktopBtn"),
            title: "Desktop view (100%)",
            children: /* @__PURE__ */ jsx(Monitor, { className: "h-4 w-4" })
          }
        )
      ]
    }
  );
}
export {
  MOBILE_VIEWPORT_WIDTH,
  ViewportToggle
};
