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

import ErrorCircleFilledIcon from "@/components/Icons/ErrorCircleFilled"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"

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

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

  return (
    <SASModal>
      <ErrorCircleFilledIcon height={64} width={64} color="red" />
      <Title as="h2" level="h1" textAlign="center" textTransform="regular">
        {intl.formatMessage({ id: "Accounts are already linked" })}
      </Title>
      <Body textAlign="center">
        {/* TODO copy */}
        {intl.formatMessage({
          id: "We could not connect your accounts to give you access. Please contact us and we’ll help you resolve this issue.",
        })}
      </Body>
      {/* TODO link to SASxScandic page on My Pages */}
      <Button theme="base" asChild>
        <Link href="#">{intl.formatMessage({ id: "View your account" })}</Link>
      </Button>
      <SASModalDivider />
      <SASModalContactBlock />
    </SASModal>
  )
}
