import { serverClient } from "@/lib/trpc/server"

import { EmailIcon, PhoneIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import { getValueFromContactConfig } from "@/utils/contactConfig"

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

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

export default async function ContactRow({ contact }: ContactRowProps) {
  const data = await serverClient().contentstack.base.contact()
  if (!data) {
    return null
  }

  const val = getValueFromContactConfig(contact.contact_field, data)
  const footnote = getValueFromContactConfig(contact.selectTest, data)

  if (!val) {
    return null
  }

  let Icon = null
  if (contact.contact_field.includes("email")) {
    Icon = EmailIcon
  } else if (contact.contact_field.includes("phone")) {
    Icon = PhoneIcon
  }

  let openableLink = val
  if (contact.contact_field.includes("email")) {
    openableLink = `mailto:${val}`
  } else if (contact.contact_field.includes("phone")) {
    openableLink = `tel:${val}`
  }

  return (
    <div className={styles.wrapper}>
      <div>
        <Body color="burgundy" textTransform="bold">
          {contact.display_text}
        </Body>
        <Link
          className={styles.link}
          href={openableLink}
          variant="underscored"
          color="burgundy"
          size="small"
        >
          {Icon ? <Icon width="20" height="20" color="burgundy" /> : null}
          {val}
        </Link>
      </div>
      {footnote && <Footnote color="burgundy">{footnote}</Footnote>}
    </div>
  )
}
