import { Lang } from "@/constants/languages"
import { serverClient } from "@/lib/trpc/server"

import { getValueFromContactConfig } from "@/utils/contactConfig"

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

import type { ContactRowProps } from "@/types/components/loyalty/sidebar"

export default async function ContactRow({ contact }: ContactRowProps) {
  const data = await serverClient().contentstack.contactConfig.get({
    lang: Lang.en,
  })

  const val = getValueFromContactConfig(contact.contact_field, data)

  if (!val) {
    return null
  }

  return (
    <div className={styles.container}>
      <h4 className={styles.title}>{contact.display_text}</h4>
      <p className={styles.value}>{val}</p>
    </div>
  )
}