import WobblingImage from "@/components/wobbling-image";
import type { Metadata } from "next";
import Link from "@/components/link";

export const metadata: Metadata = {
  title: "Wep wep",
};

export default function NotFound() {
  return (
    <main className="flex items-center h-screen pt-16 md:pt-32 pb-12 px-8 md:px-0">
      <div className="mx-auto w-[380px]">
        <noscript>
          <header className="mb-8 -ms-5 text-center">
            <h1 className="font-bold text-8xl">404</h1>
          </header>
          <div className="">
            Oh you lost, you know there&apos;s nothing here...
          </div>
        </noscript>
        <WobblingImage
          images={{
            idle: "/images/coralz_idle.png",
            aware: "/images/coralz_scared.png",
            poked: "/images/coralz_poked.png"
          }}
        />
        <div className="-mt-2">
          <Link className="text-xs" target="_blank" href="https://x.com/JoelGuerraC/status/1840178999546319101">{">]"}Image source</Link>
        </div>
      </div>
    </main>
  );
}
