import { ArrowRightIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"

import styles from "./page.module.css"

export default async function CommunicationSlot() {
  const { formatMessage } = await getIntl()
  return (
    <section className={styles.container}>
      <article className={styles.content}>
        <Subtitle color="black">
          {formatMessage({ id: "My communication preferences" })}
        </Subtitle>
        <Body color="black">
          {formatMessage({
            id: "Tell us what information and updates you'd like to receive, and how, by clicking the link below.",
          })}
        </Body>
      </article>
      <Link href="#" variant="icon">
        <ArrowRightIcon color="burgundy" />
        <Body color="burgundy" textTransform="underlined">
          {formatMessage({ id: "Manage preferences" })}
        </Body>
      </Link>
    </section>
  )
}
