"use client"

import { MainLayout } from "@repo/ui/MainLayout"
import { useTranslations } from "next-intl"
import { useEffect } from "react"

interface ErrorBoundaryPageProps {
  error: Error & { digest?: string }
  reset: () => void
}

const ErrorBoundaryPage: React.FC<ErrorBoundaryPageProps> = (props) => {
  const { error, reset } = props

  const t = useTranslations()

  useEffect(() => {
    console.error(error)
  }, [error])

  return (
    <MainLayout>
      <h1 className="text-3xl font-semibold text-red-600">
        {t("errors.error")} 500 - {t("errors.server-error")}
      </h1>
      <p className="mb-4 mt-2">
        <button
          className="rounded-md bg-blue-600 px-3 py-2 text-white hover:bg-blue-800"
          onClick={reset}
        >
          {t("errors.try-again")}
        </button>
      </p>
    </MainLayout>
  )
}

export default ErrorBoundaryPage
