'use client'
import type {FunctionComponent} from 'react'
import type {Contact} from '@/models/contact'
import {Card, CardContent, CardDescription, CardTitle} from '@/components/ui/card'
import {Button} from '@/components/ui/button'
import {ChevronRight, Star, StarOff} from 'lucide-react'
import Link from 'next/link'
import AvatarWithFallback from '@/components/custom/avatarWithFallback'

const ContactCard: FunctionComponent<Contact> = ({avatar, description, firstName, lastName, id, favorite}) => {
  return (
    <Card className="my-4 py-2">
      <CardContent className="flex h-full px-2 gap-4">
        <AvatarWithFallback className="h-6 w-6" avatar={avatar} firstName={firstName} lastName={lastName} />
        <div className="flex-grow flex justify-between">
          <div>
            <CardTitle>
              {firstName} {lastName}
            </CardTitle>
            <CardDescription>{description}</CardDescription>
          </div>
          <div className="flex flex-col items-center">
            <Button
              variant="ghost"
              size="icon"
              className="h-6 w-6"
              aria-label={favorite ? 'Unfavorite contact' : 'Favorite contact'}>
              {favorite ? <Star className="h-4 w-4 text-yellow-500 fill-yellow-500" /> : <StarOff />}
            </Button>
            <Link href={`/contacts/${id}`}>
              <Button variant="ghost" size="icon" aria-label="View contact details" className="h-6 w-6">
                <ChevronRight size={30} className="h-4 w-4" />
              </Button>
            </Link>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}

export default ContactCard
