"use client"
import Link from "next/link"
import { useIntl } from "react-intl"

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

import { partnerSas } from "@/constants/routes/myPages"

import Button from "@/components/TempDesignSystem/Button"
import useLang from "@/hooks/useLang"

import { SASModal, SASModalContactBlock, SASModalDivider } from "./SASModal"

export function AlreadyLinkedError() {
  const intl = useIntl()
  const lang = useLang()

  return (
    <SASModal>
      <MaterialIcon icon="cancel" isFilled size={64} />
      <Typography variant="Title/Subtitle/lg">
        <h1>
          {intl.formatMessage({
            defaultMessage: "Your accounts are already linked",
          })}
        </h1>
      </Typography>
      <Typography variant="Body/Paragraph/mdRegular">
        <p>
          {intl.formatMessage({
            defaultMessage:
              "Looks like you’ve already linked your Scandic Friends and SAS EuroBonus accounts!",
          })}
        </p>
      </Typography>
      <Button theme="base" asChild>
        <Link href={partnerSas[lang]}>
          {intl.formatMessage({
            defaultMessage: "View your linked accounts",
          })}
        </Link>
      </Button>
      <SASModalDivider />
      <SASModalContactBlock />
    </SASModal>
  )
}
