import {type FunctionComponent} from 'react'
import type {Contact} from '@/models/contact'
import Link from 'next/link'
import AvatarWithFallback from '@/components/custom/avatarWithFallback'

const FavoriteCard: FunctionComponent<Contact> = ({id, avatar, firstName, lastName}) => {
  return (
    <Link href={`/contacts/${id}`} className="flex flex-col gap-4">
      <AvatarWithFallback className="h-20 w-20" avatar={avatar} firstName={firstName} lastName={lastName} />
      <div className="flex flex-row justify-center text-sm">
        {firstName} {lastName}
      </div>
    </Link>
  )
}

export default FavoriteCard
