web/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/index.tsx

import { Typography } from "@scandic-hotels/design-system/Typography"
import { JoinLoyaltyContactEnums } from "@scandic-hotels/trpc/types/joinLoyaltyContact"

import { getIntl } from "@/i18n"

import ContactRow from "./ContactRow"

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

import type { ContactProps } from "@/types/components/sidebar/joinLoyaltyContact"

export default async function Contact({ contactBlock }: ContactProps) {
  const intl = await getIntl()
  return (
    <article className={styles.contactContainer}>
      <Typography variant="Title/Subtitle/md">
        <p>
          {intl.formatMessage({
            id: "common.contactUs",
            defaultMessage: "Contact us",
          })}
        </p>
      </Typography>
      <section className={styles.contact}>
        {contactBlock.map((contact, i) => {
          switch (contact.typename) {
            case JoinLoyaltyContactEnums.contact.Contact:
              return (
                <ContactRow
                  key={`${contact.display_text}-${i}`}
                  contact={contact}
                />
              )
            default:
              return null
          }
        })}
      </section>
    </article>
  )
}