import { Link } from "@/navigation";
import { getTranslations, getLocale } from "next-intl/server";
import { HiChevronRight } from "react-icons/hi";
import { Metadata } from "next";
import { buildPageMetadata } from "@/lib/metadata.helpers";

export async function generateMetadata(): Promise<Metadata> {
  const locale = await getLocale();

  return buildPageMetadata({
    title: locale === "ar"
      ? "الصفحة غير موجودة | صحيفة مال"
      : "Page Not Found | Maaal News",
    description: locale === "ar"
      ? "عذراً، الصفحة التي تبحث عنها غير موجودة. قد تكون قد حُذفت أو نُقلت إلى مكان آخر."
      : "Sorry, the page you're looking for doesn't exist. It may have been removed or moved to another location.",
    image: "/images/404-og.jpg",
    keywords: locale === "ar"
      ? "صفحة غير موجودة، خطأ 404، صحيفة مال"
      : "page not found, 404 error, maaal news",
    url: "/404",
    type: "website"
  });
}

export default async function NotFound() {
  const t = await getTranslations();
  return (
    <div className="flex w-full h-full items-center justify-center">
      <div className="min-h-screen h-full max-w-[700px] flex flex-col justify-center items-center gap-8 px-3 md:px-6">
        <img
          src={"/layout/notFoundPage.png"}
          alt={"not found"}
          className="w-full max-h-96 sm:max-h-[400px] md:max-h-[550px] h-max"
        />
        <div className="flex flex-col items-center gap-4">
          <h3 className="text-3xl font-bold">{t("layout.notFoundTitle")}</h3>
          <p className="text-2xl text-fontColorSecondary mb-2">
            {t("layout.notFoundDesc")}
          </p>
          <Link
            href={"/"}
            className="btn btn-primary rounded-2xl hover:!text-white"
          >
            <HiChevronRight size={20} className="rtl:rotate-180" />
            {t("layout.returnHome")}
          </Link>
        </div>
      </div>
    </div>
  );
}