"use client";
import { jsxs, jsx } from "../../packages/jsx/src/jsx-runtime.js";
import { Button } from "../Button/Button.js";
import { Flex } from "../../atoms/Flex/Flex.js";
import { Spacing } from "../../tokens/Spacing.js";
import { Text } from "../../atoms/Text/Text.js";
const magnifyingGlassSrc = "https://storage.thegraph.com/components/magnifying-glass-with-ring.png";
function MenuSearchEmptyState({
  heading = "No results found",
  text,
  onResetClick,
  className
}) {
  return /* @__PURE__ */ jsxs(
    Flex.Column,
    {
      align: "center",
      justify: "center",
      gap: Spacing["16px"],
      sx: { pt: Spacing["16px"], m: Spacing["4px"] },
      className,
      children: [
        /* @__PURE__ */ jsx(
          "img",
          {
            src: "https://storage.thegraph.com/components/background-cloud.webp",
            alt: "",
            sx: { position: "absolute", opacity: 0.64 }
          }
        ),
        /* @__PURE__ */ jsx("img", { src: magnifyingGlassSrc, alt: "", sx: { width: "100px", height: "100px" } }),
        /* @__PURE__ */ jsxs(Flex.Column, { align: "center", justify: "center", gap: Spacing["8px"], children: [
          /* @__PURE__ */ jsx(Text.H20, { align: "center", children: heading }),
          /* @__PURE__ */ jsx(Text.P16, { align: "center", sx: { whiteSpace: "pre-line" }, children: text })
        ] }),
        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onResetClick, children: "Reset search" })
      ]
    }
  );
}
export {
  MenuSearchEmptyState
};
