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

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

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

export default async function EmailSlot() {
  const intl = await getIntl()

  return (
    <section className={styles.container}>
      <div className={styles.content}>
        <Typography variant="Title/Subtitle/md">
          <h3>
            {intl.formatMessage({
              id: "profile.emailPreferences",
              defaultMessage: "E-mail preferences",
            })}
          </h3>
        </Typography>
        <Typography variant="Body/Paragraph/mdRegular">
          <p>
            {intl.formatMessage({
              id: "profile.manageEmailsAndUpdates",
              defaultMessage:
                "Manage what e-mails and updates you'd like to receive, and how, by clicking the link below.",
            })}
          </p>
        </Typography>
      </div>
      <ManageEmailPreferencesButton />
    </section>
  )
}