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

export default function Page403() {
  const t = useTranslations();
  return (
    <div className="h-fit grid items-center lg:py-20 py-36">
      <div className="flex justify-center flex-col items-center">
        <MediaWithFallback
          width="500"
          height="500"
          src={Forbidden}
          alt="not found icon"
          loading="lazy"
        />

        <h2 className="text-center font-bold text-2xl my-4 text-primary-dark">
          {t(
            "Access to the page or resource you were trying to access is blocked",
          )}
        </h2>
        <ErrorButton title={t("Back to home")} link="/" />
      </div>
    </div>
  );
}