import Link from "next/link"
import { ArrowRightIcon, SearchXIcon } from "lucide-react"
 
import { Button } from "@/components/ui/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
import { Daikanoid } from "@/components/daikanoid"
 
export default function NotFound() {
  return (
    <div>
      <Empty className="py-12 max-lg:min-h-svh">
        <EmptyHeader>
          <EmptyMedia variant="icon">
            <SearchXIcon />
          </EmptyMedia>
 
          <EmptyTitle className="text-base">Page not found</EmptyTitle>
 
          <EmptyDescription>
            The page you are looking for does not exist or has been moved.
          </EmptyDescription>
        </EmptyHeader>
 
        <EmptyContent>
          <Button
            variant="outline"
            nativeButton={false}
            render={<Link href="/" />}
          >
            Go to Home
            <ArrowRightIcon />
          </Button>
        </EmptyContent>
      </Empty>
 
      {/* The canvas is fixed at 800x600, so the game is desktop only. */}
      <section className="place-items-center pb-6 max-lg:hidden">
        <Daikanoid />
      </section>
    </div>
  )
}