import Link from "next/link";
import { MapPinOffIcon } from "lucide-react";

import { SiteHeader } from "@/components/public/site-header";
import { Button } from "@/components/ui/button";
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty";

export default function NotFound() {
  return (
    <div className="min-h-svh">
      <SiteHeader />
      <main className="mx-auto grid min-h-[calc(100svh-4rem)] max-w-3xl place-items-center px-4 py-16">
        <Empty>
          <EmptyHeader>
            <EmptyMedia variant="icon"><MapPinOffIcon aria-hidden="true" /></EmptyMedia>
            <EmptyTitle>ไม่พบคู่มือนี้</EmptyTitle>
            <EmptyDescription>
              หน้านี้อาจถูกซ่อน เปลี่ยนชื่อ หรือยังไม่มีเนื้อหาที่เผยแพร่
            </EmptyDescription>
          </EmptyHeader>
          <EmptyContent>
            <Button render={<Link href="/" />}>กลับไปหน้ารวมตัวละคร</Button>
          </EmptyContent>
        </Empty>
      </main>
    </div>
  );
}