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

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

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

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

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

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

  return (
    <SASModal>
      <MaterialIcon
        icon="cancel"
        color="Icon/Feedback/Error"
        isFilled
        size={64}
      />
      <Typography variant="Title/Subtitle/lg">
        <h1>
          {intl.formatMessage({
            defaultMessage: "Date of birth not matching",
          })}
        </h1>
      </Typography>
      <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>
      <Button theme="base" asChild>
        <Link href={profile[lang]}>
          {intl.formatMessage({
            defaultMessage: "View your details",
          })}
        </Link>
      </Button>
      <SASModalDivider />
      <SASModalContactBlock />
    </SASModal>
  )
}
