"use client"

import { useIntl } from "react-intl"

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

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

export function UnlinkError() {
  const intl = useIntl()

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