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

import ManagePreferencesButton from "@/components/Profile/ManagePreferencesButton"
import { getIntl } from "@/i18n"

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

export default async function CommunicationSlot() {
  const intl = await getIntl()
  return (
    <section className={styles.container}>
      <div className={styles.content}>
        <Typography variant="Title/Subtitle/md">
          <h3>
            {intl.formatMessage({
              defaultMessage: "My communication preferences",
            })}
          </h3>
        </Typography>
        <Typography variant="Body/Paragraph/mdRegular">
          <p>
            {intl.formatMessage({
              defaultMessage:
                "Tell us what information and updates you'd like to receive, and how, by clicking the link below.",
            })}
          </p>
        </Typography>
      </div>
      <ManagePreferencesButton />
    </section>
  )
}