import { Button } from "@/components/ui/button";
import Link from "next/link";
import { useTranslation } from "react-i18next";
import SEO from "@/components/shared/SEO";
import { useRouter } from "next/router";
import { useHome } from "@/context/helpers/Home/HomeContext";

export default function NotFoundPage() {
  const { t } = useTranslation("notFound");
  const router = useRouter();
  const { companyData } = useHome();

  const baseUrl =
    typeof window !== "undefined"
      ? window.location.origin
      : companyData?.domain
      ? `https://${companyData.domain}`
      : "";
  const notFoundUrl = `${baseUrl}${router.asPath}`;

  return (
    <>
      <SEO
        title={t("headTitle", "Page Not Found")}
        description={t("seo.description", "The page you are looking for could not be found")}
        url={notFoundUrl}
        type="website"
        noindex={true}
      />

      <main className="min-h-[70vh] flex items-center justify-center px-4">
        <div className="text-center">
          <p className="text-sm font-semibold text-secondColor">{t("code")}</p>
          <h1 className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
            {t("title")}
          </h1>
          <p className="mt-2 text-base text-gray-600">{t("subtitle")}</p>

          <div className="flex items-center justify-center gap-3 mt-6">
            <Button asChild variant="default">
              <Link href="/">{t("actions.goHome")}</Link>
            </Button>

            {/* <Button asChild variant="outline">
              <Link href="/allProducts">{t("actions.browseProducts")}</Link>
            </Button> */}
          </div>
        </div>
      </main>
    </>
  );
}