import { useTranslations } from "next-intl";
import NotFoundImage from "@/public/assets/images/404.png";
import ErrorButton from "@/shared/buttons/ErrorButton";
import MediaWithFallback from "@/shared/MediaWithFallback";

export default function NotFound() {
  const t = useTranslations();
  return (
    <div className="h-screen grid items-center">
      <div className="flex justify-center flex-col items-center">
        <MediaWithFallback
          width="500"
          height="500"
          src={NotFoundImage}
          alt="not found icon"
          loading="lazy"
        />
        <h2 className="text-center font-bold lg:text-2xl text-lg my-4  ">
          {t("page not found")}
        </h2>
        <h2 className="text-center lg:w-[30%] w-3/4 mx-auto font-medium leading-8 text-lg my-4 text-sub">
          {t("page not found description")}
        </h2>
        <ErrorButton title={t("Back to home")} link="/" />
      </div>
    </div>
  );
}