"use client";

import { useTranslations } from "next-intl";
import { Link } from "@/lib/i18n/navigation";
import { Home, ArrowRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import { AnimatedSection } from "@/components/shared/AnimatedSection";

export default function NotFound() {
  const t = useTranslations("errors");

  return (
    <div className="relative z-10 flex min-h-[70vh] flex-col items-center justify-center px-6 py-24 text-center">
      <AnimatedSection>
        <div className="mb-6 font-mono text-8xl font-bold text-accent/20 select-none">404</div>
        <div className="mb-3 font-mono text-sm text-accent">// {t("notFound.label")}</div>
        <h1 className="mb-4 text-3xl font-bold text-text-primary md:text-4xl">{t("notFound.title")}</h1>
        <p className="mb-8 max-w-md text-text-secondary">{t("notFound.description")}</p>
        <div className="flex flex-wrap items-center justify-center gap-3">
          <Button asChild>
            <Link href="/">
              <Home size={15} />
              {t("notFound.home")}
            </Link>
          </Button>
          <Button asChild variant="outline">
            <Link href="/writing">
              <ArrowRight size={15} />
              {t("notFound.writing")}
            </Link>
          </Button>
        </div>
      </AnimatedSection>
    </div>
  );
}
