import { Link } from "@repo/i18n/navigation"
import { MainLayout } from "@repo/ui/MainLayout"
import { useTranslations } from "next-intl"

/**
 * Note that `app/[locale]/[...rest]/page.tsx` is necessary for this page to render.
 */
const NotFound: React.FC = () => {
  const t = useTranslations()

  return (
    <MainLayout>
      <h1 className="text-3xl font-semibold text-red-600">
        {t("errors.error")} 404 - {t("errors.not-found")}
      </h1>
      <p className="mb-4 mt-2">
        {t("errors.page-doesnt-exist")}{" "}
        <Link href="/" className="text-blue-800 hover:underline">
          {t("errors.return-to-home-page")}
        </Link>
      </p>
    </MainLayout>
  )
}

export default NotFound