import ManagePreferencesButton from "@/components/Profile/ManagePreferencesButton"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"

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

export default async function CommunicationSlot() {
  const intl = await getIntl()
  return (
    <section className={styles.container}>
      <article className={styles.content}>
        <Subtitle type="two" color="black">
          {intl.formatMessage({ id: "My communication preferences" })}
        </Subtitle>
        <Body color="black">
          {intl.formatMessage({
            id: "Tell us what information and updates you'd like to receive, and how, by clicking the link below.",
          })}
        </Body>
      </article>
      <ManagePreferencesButton />
    </section>
  )
}
