import { serverClient } from "@/lib/trpc/server"
import { getValueFromContactConfig } from "@/utils/contactConfig"

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

import { Lang } from "@/constants/languages"
import type { ContactFields } from "@/types/requests/contactConfig"

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

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