"use client"

import { Button } from "@repo/ui/design/Button"
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 className="items-center justify-center text-center">
      <h1 className="text-3xl font-semibold">
        {t("errors.error")} 500 - {t("errors.server-error")}
      </h1>
      <p className="mb-4 mt-2">
        <Button onClick={reset}>{t("errors.try-again")}</Button>
      </p>
    </MainLayout>
  )
}

export default ErrorBoundaryPage