---
import DialNav from '@/components/DialNav';
import Footer from '@/components/Footer.astro';
import FooterEasterEgg from '@/components/FooterEasterEgg.astro';
import NavBar from '@/components/NavBar/NavBar.astro';
import { MUX_URL } from '@/consts';
import Base from '@/layouts/Base.astro';

interface Props {
  title: string;
  description: string;
  code?: string;
  message?: string;
}

const { title, description, code = '404', message = 'NOT FOUND' } = Astro.props;
---

<Base {title} {description} withCompact>
  <div class="flex flex-col" style={{ minHeight: "80dvh" }}>
    <NavBar />
    <main id="main-content" class="w-full">
      <div
        class="mx-auto grid w-full max-w-305 justify-between gap-8 px-5 py-10 md:flex md:pt-32 md:pb-16"
      >
        <div class="flex flex-col leading-none">
          <h1
            class="font-display text-h2 font-bold text-faded-black md:text-h1 dark:text-manila-light"
          >
            {code}
          </h1>
          <h2
            class="font-display text-h2 font-bold text-stroke-faded-black md:text-h1 dark:text-stroke-manila-light"
          >
            {message}
          </h2>
        </div>
        <DialNav
          client:load
          left={[
            { href: "/", label: "Home", angle: -60 },
            { href: "/docs", label: "Docs", angle: -120 },
          ]}
          right={[
            {
              href: MUX_URL,
              label: "mux.com",
              angle: 60,
            },
            { href: "/blog", label: "Blog", angle: 120 },
          ]}
        />
      </div>
    </main>
  </div>
  <Footer />
  <FooterEasterEgg />
</Base>
