import type {FunctionComponent} from 'react'
import PageTitle from '@/components/custom/pageTitle'
import Contact from '@/app/(authenticated)/tags/[tagId]/contact'
import {Separator} from '@/components/ui/separator'
import TagContactForm from '@/app/(authenticated)/tags/[tagId]/tagContactForm'
import {getTag} from '@/dal/tags'
import {getContacts} from '@/dal/contacts'

interface TagIdPageParams {
  params: Promise<{
    tagId: string
  }>
}

const TagIdPage: FunctionComponent<TagIdPageParams> = async ({params}) => {
  const {tagId} = await params
  const [tag, contacts] = await Promise.all([getTag(tagId), getContacts()])

  return (
    <>
      <div className="flex justify-between items-center mb-6">
        <PageTitle>{tag.name}</PageTitle>
      </div>

      <TagContactForm contacts={contacts} />

      <Separator className="my-4" />

      <div className="flex flex-col gap-4">
        {tag.contacts.map(c => (
          <Contact {...c} key={c.id} />
        ))}
      </div>
    </>
  )
}

export default TagIdPage
