"use client"

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

import { Typography } from "@scandic-hotels/design-system/Typography"

import { GenericError } from "./components/GenericError"
import { SASModalContactBlock } from "./components/SASModal"

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

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

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

  return (
    <GenericError
      title={intl.formatMessage({
        defaultMessage: "Something went wrong",
      })}
    >
      <Typography variant="Body/Paragraph/mdRegular">
        <p>
          {intl.formatMessage({
            defaultMessage: "Please try again later",
          })}
        </p>
      </Typography>
      <SASModalContactBlock />
    </GenericError>
  )
}
