"use client";

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

import { Button } from "@/components/ui/button";
import { EmptyState } from "@/components/ui/empty-state";
import { useTranslation } from "@/hooks/useTranslation";
import { ROUTES } from "@/lib/constants/routes";

/** Global 404 page (Next.js convention) built on the shared EmptyState. */
export default function NotFound() {
  const { t } = useTranslation();

  return (
    <div className="flex min-h-screen w-full flex-col items-center justify-center bg-background p-4">
      <EmptyState
        icon={<SearchXIcon strokeWidth={1.5} />}
        title={t("errors.notFoundTitle")}
        description={t("errors.notFoundDescription")}
        action={
          <Button
            className="w-full"
            nativeButton={false}
            render={<Link href={ROUTES.HOME} />}
          >
            {t("common.backToHome")}
          </Button>
        }
      />
    </div>
  );
}