"use client"

import { useIntl } from "react-intl"

import { customerService } from "@/constants/webHrefs"

import LoadingSpinner from "@/components/LoadingSpinner"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang"

import styles from "./timeoutSpinner.module.css"

export default function TimeoutSpinner() {
  const intl = useIntl()
  const lang = useLang()

  return (
    <div className={styles.container}>
      <LoadingSpinner />
      <Subtitle className={styles.heading}>
        {intl.formatMessage({
          defaultMessage: "Taking longer than usual",
        })}
      </Subtitle>
      <Body textAlign="center" className={styles.messageContainer}>
        {intl.formatMessage(
          {
            defaultMessage:
              "We are still confirming your booking. This is usually a matter of minutes and we do apologise for the wait. Please check your inbox for a booking confirmation email and if you still haven't received it by end of day, please contact our <link>customer support</link>.",
          },
          {
            link: (text) => (
              <Link
                href={customerService[lang]}
                textDecoration="underline"
                target="_blank"
              >
                {text}
              </Link>
            ),
          }
        )}
      </Body>
    </div>
  )
}
