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

import { getIntl } from "@/i18n"

import { AlreadyLinkedError } from "../components/AlreadyLinkedError"
import { DateOfBirthError } from "../components/DateOfBirthError"
import { GenericError } from "../components/GenericError"
import { SASModalContactBlock } from "../components/SASModal"
import { TooManyCodesError } from "../components/TooManyCodesError"
import { TooManyFailedAttemptsError } from "../components/TooManyFailedAttemptsError"
import { UnlinkError } from "../components/UnlinkError"

import type { LangParams, PageArgs, SearchParams } from "@/types/params"

export default async function Page(
  props: PageArgs<LangParams> & SearchParams<{ errorCode?: "dateOfBirthMismatch" }>
) {
  const searchParams = await props.searchParams;
  const intl = await getIntl()

  const { errorCode } = searchParams

  if (errorCode === "dateOfBirthMismatch") {
    return <DateOfBirthError />
  }

  if (errorCode === "tooManyFailedAttempts") {
    return <TooManyFailedAttemptsError />
  }

  if (errorCode === "tooManyCodes") {
    return <TooManyCodesError />
  }

  if (errorCode === "alreadyLinked") {
    return <AlreadyLinkedError />
  }

  if (errorCode === "unlinkError") {
    return <UnlinkError />
  }

  return (
    <GenericError
      title={intl.formatMessage({
        defaultMessage: "We could not connect your accounts",
      })}
    >
      <Typography variant="Body/Paragraph/mdRegular">
        <p>
          {intl.formatMessage({
            defaultMessage:
              "We couldn’t connect your accounts. Please contact us and we’ll help you resolve this.",
          })}
        </p>
      </Typography>
      <SASModalContactBlock />
    </GenericError>
  )
}
