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

import ContactRow from "./ContactRow"

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

import { JoinLoyaltyContactTypenameEnum } from "@/types/components/loyalty/enums"
import type { ContactProps } from "@/types/components/loyalty/sidebar"

export default async function Contact({ contactBlock }: ContactProps) {
  const { formatMessage } = await getIntl()
  return (
    <div className={styles.contactContainer}>
      <Title level="h5">{formatMessage({ id: "Contact us" })}</Title>
      <section>
        {contactBlock.map(({ contact, __typename }, i) => {
          switch (__typename) {
            case JoinLoyaltyContactTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContactBlockContactContact:
              return (
                <ContactRow
                  key={`${contact.display_text}-${i}`}
                  contact={contact}
                />
              )
            default:
              return null
          }
        })}
      </section>
    </div>
  )
}