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

import ContactRow from "./ContactRow"

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

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

export default async function Contact({ contactBlock }: ContactProps) {
  const intl = await getIntl()
  return (
    <article className={styles.contactContainer}>
      <Subtitle>{intl.formatMessage({ id: "Contact us" })}</Subtitle>
      <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>
  )
}