"use client";
import { jsx, jsxs } from "../../packages/jsx/src/jsx-runtime.js";
import { memo } from "react";
import { Flex } from "theme-ui";
const NotFound = memo(({ title, subtitle, link }) => /* @__PURE__ */ jsx(
  Flex,
  {
    sx: {
      width: "100%",
      height: "100%",
      justifyContent: "center",
      alignItems: "center"
    },
    children: /* @__PURE__ */ jsxs(
      Flex,
      {
        sx: {
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          width: "100%",
          maxWidth: "656px",
          margin: "0 auto",
          height: "100%"
        },
        children: [
          /* @__PURE__ */ jsx(
            "img",
            {
              src: "https://storage.thegraph.com/components/404_image.png",
              alt: "404 page not found",
              sx: { width: "100%", maxWidth: "656px" }
            }
          ),
          /* @__PURE__ */ jsx(
            "h2",
            {
              sx: (th) => {
                var _a;
                return {
                  ...(_a = th.styles) == null ? void 0 : _a.h2,
                  fontWeight: 600,
                  fontSize: "1.5rem",
                  lineHeight: "2rem",
                  letterSpacing: "-0.4px",
                  width: "100%",
                  textAlign: "center",
                  color: "#fff"
                };
              },
              children: title
            }
          ),
          /* @__PURE__ */ jsx(
            "h5",
            {
              sx: (th) => {
                var _a;
                return {
                  ...(_a = th.styles) == null ? void 0 : _a.h5,
                  fontWeight: "normal",
                  fontSize: "1rem",
                  lineHeight: "1.5rem",
                  color: "rgba(255, 255, 255, 0.64);",
                  width: "100%",
                  maxWidth: "616px",
                  textAlign: "center",
                  margin: "0 auto"
                };
              },
              children: subtitle
            }
          ),
          /* @__PURE__ */ jsx("div", { sx: { marginTop: "1.25rem" }, children: link })
        ]
      }
    )
  }
));
NotFound.displayName = "NotFound";
export {
  NotFound
};
