import {type FunctionComponent} from 'react'
import {getContact} from '@/dal/contacts'
import AvatarWithFallback from '@/components/custom/avatarWithFallback'

interface ContactDetailPageParams {
  params: Promise<{
    contactId: string
  }>
}

const ContactDetailPage: FunctionComponent<ContactDetailPageParams> = async ({params}) => {
  const {contactId} = await params
  const {firstName, lastName, description, avatar, contactInfo} = await getContact(contactId)

  return (
    <>
      <div className="flex items-center">
        <AvatarWithFallback className="w-20 h-20" avatar={avatar} firstName={firstName} lastName={lastName} />

        <div className="text-4xl ms-4 flex-grow">
          {firstName} {lastName}
        </div>
      </div>

      <div className="text-muted-foreground my-4">{description}</div>

      <div className="text-xl">Contactinfo</div>

      {contactInfo.map(({type, value}, i) => (
        <div className="flex justify-between" key={i}>
          <div>{type.substring(0, 1).toUpperCase() + type.slice(1)}</div>
          <div>{value}</div>
        </div>
      ))}
    </>
  )
}

export default ContactDetailPage
