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

export default function Page500() {
  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={Back}
          alt="not found icon"
          loading="lazy"
        />
        <h2 className="text-center font-bold lg:text-2xl text-lg my-4  ">
          {t("page 500")}
        </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 500 description")}
        </h2>
        <ErrorButton title={t("Back to home")} link="/" />
      </div>
    </div>
  );
}