import React from "react"
import Translate, { translate } from "@docusaurus/Translate"
import { PageMetadata } from "@docusaurus/theme-common"
import Layout from "@theme/Layout"
import useBaseUrl from "@docusaurus/useBaseUrl"
import UserProvider from "../providers/User"

export default function NotFound(): JSX.Element {
  return (
    <>
      <PageMetadata
        title={translate({
          id: "theme.NotFound.title",
          message: "Page Not Found",
        })}
      />
      <UserProvider>
        <Layout>
          <main className="container markdown theme-doc-markdown my-4">
            <div className="row">
              <div className="col col--6 col--offset-3">
                <h1>
                  <Translate
                    id="theme.NotFound.title"
                    description="The title of the 404 page"
                  >
                    Page Not Found
                  </Translate>
                </h1>
                <p>
                  <Translate
                    id="theme.NotFound.p1"
                    description="The first paragraph of the 404 page"
                  >
                    Looks like the page you&apos;re looking for has either
                    changed into a different location or isn&apos;t in our
                    documentation anymore.
                  </Translate>
                </p>
                <p>
                  If you think this is a mistake, please{" "}
                  <a
                    href="https://github.com/medusajs/medusa/issues/new?assignees=&labels=type%3A+docs&template=docs.yml"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    report this issue on GitHub
                  </a>
                </p>
                <h2>Some popular links</h2>
                <ul>
                  <li>
                    <a href={useBaseUrl("/usage/create-medusa-app")}>
                      Install Medusa with create-medusa-app
                    </a>
                  </li>
                  <li>
                    <a href="https://docs.medusajs.com/api/store">
                      Storefront REST API Reference
                    </a>
                  </li>
                  <li>
                    <a href="https://docs.medusajs.com/api/admin">
                      Admin REST API Reference
                    </a>
                  </li>
                  <li>
                    <a href={useBaseUrl("/starters/nextjs-medusa-starter")}>
                      Install Next.js Storefront
                    </a>
                  </li>
                  <li>
                    <a href={useBaseUrl("/admin/quickstart")}>
                      Install Medusa Admin
                    </a>
                  </li>
                  <li>
                    <a href={useBaseUrl("/user-guide")}>User Guide</a>
                  </li>
                </ul>
              </div>
            </div>
          </main>
        </Layout>
      </UserProvider>
    </>
  )
}