"use client"

import * as Sentry from "@sentry/nextjs"
import { useEffect } from "react"
import { useIntl } from "react-intl"

import { DestinationOverviewPageError } from "@/components/ContentType/DestinationPage/DestinationOverviewPage/error"

export default function Error({
  error,
}: {
  error: Error & { digest?: string }
}) {
  const intl = useIntl()

  useEffect(() => {
    if (!error) return

    console.error(error)
    Sentry.captureException(error)
  }, [error])

  return (
    <DestinationOverviewPageError>
      <p>
        <strong>
          {intl.formatMessage(
            {
              defaultMessage: "An error occurred ({errorId})",
            },
            {
              errorId: `${error.digest}@${Date.now()}`,
            }
          )}
        </strong>
      </p>
    </DestinationOverviewPageError>
  )
}
