'use client'
import type {FunctionComponent} from 'react'
import {Card, CardHeader, CardTitle} from '@/components/ui/card'
import Link from 'next/link'
import {Button} from '@/components/ui/button'
import {ChevronRightIcon, TrashIcon} from 'lucide-react'
import {useParams} from 'next/navigation'
import ActionButton from '@/components/custom/actionButton'
import {unlinkTagsFromContactServerFunction} from '@/serverFunctions/tags'

interface CardProps {
  id: string
  firstName: string
  lastName: string | null
}

const Contact: FunctionComponent<CardProps> = ({id, lastName, firstName}) => {
  const {tagId} = useParams<{tagId: string}>()

  return (
    <Card>
      <CardHeader className="flex flex-row justify-between items-center">
        <CardTitle>
          {firstName} {lastName}
        </CardTitle>
        <div>
          <ActionButton
            variant="ghost"
            action={() => unlinkTagsFromContactServerFunction({tagId: tagId, contactIds: [id]})}>
            <TrashIcon />
          </ActionButton>
          <Link href={`/contacts/${id}`}>
            <Button variant="ghost">
              <ChevronRightIcon />
            </Button>
          </Link>
        </div>
      </CardHeader>
    </Card>
  )
}

export default Contact
