"use client";

import Link from "next/link";
import { Button } from "@/components/ui/button";

/**
 * 404 / Not Found 블럭.
 * Next.js App Router 에서는 src/app/not-found.tsx 로 복사해 쓰거나,
 * 라우트별 not-found.tsx 의 본문으로 사용한다.
 */
export function Error404Block() {
  return (
    <section className="flex min-h-[420px] flex-col items-center justify-center px-6 py-16 text-center">
      <p className="font-mono text-sm font-medium text-muted-foreground">404</p>
      <h1 className="mt-3 text-4xl font-bold tracking-tight sm:text-5xl">
        Page not <span className="font-serif font-normal italic">found</span>.
      </h1>
      <p className="mt-4 max-w-md text-muted-foreground">
        The page you’re looking for doesn’t exist or has moved. Check the URL or
        head back home.
      </p>
      <div className="mt-8 flex items-center gap-3">
        <Button render={<Link href="/" />}>Go home</Button>
        <Button variant="outline" render={<Link href="/components" />}>
          Browse components
        </Button>
      </div>
    </section>
  );
}