import { Head } from "fresh/runtime";
import { MainLayout } from "@components/layouts/main.tsx";
import { HttpError, PageProps } from "fresh";

export default function ErrorPage(props: PageProps) {
  const error = props.error; // Contains the thrown Error or HTTPError
  if (error instanceof HttpError) {
    const status = error.status; // HTTP status code

    // Render a 404 not found page
    if (status === 404) {
      return <h1>404 - Page not found</h1>;
    }
  }

  return (
    <>
      <Head>
        <title>404 - Page not found</title>
      </Head>
      <MainLayout url="">
        <div class="px-8 text-white mt-10">
          <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
            <h1 class="text-4xl font-bold">404 - Page not found</h1>
            <p class="my-4">
              The page you were looking for doesn't exist.
            </p>
            <a href="/" class="underline">Go back home</a>
          </div>
        </div>
      </MainLayout>
    </>
  );
}
