"use client"
import { Link } from "react-aria-components"
import { useIntl } from "react-intl"

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

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 useLang from "@/hooks/useLang"

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

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

  return (
    <SASModal>
      <ErrorCircleFilledIcon height={64} width={64} color="red" />
      <Title as="h2" level="h1" textAlign="center" textTransform="regular">
        {intl.formatMessage({ id: "Date of birth not matching" })}
      </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>
      <Button theme="base">
        <Link href={profile[lang]}>
          {intl.formatMessage({ id: "View your account" })}
        </Link>
      </Button>
      <SASModalDivider />
      <SASModalContactBlock />
    </SASModal>
  )
}
