import type {FunctionComponent} from 'react'
import {Card, CardContent, CardDescription, CardTitle} from '@/components/ui/card'
import {Avatar, AvatarImage} from '@/components/ui/avatar'
import {Button} from '@/components/ui/button'
import {ChevronRight} from 'lucide-react'
import {Link} from 'react-router'
import type {IContact} from '@/models/IContact.ts'

const ContactCard: FunctionComponent<IContact> = ({avatar, description, firstName, lastName, id}) => {
  return (
    <Card className="my-2">
      <CardContent className="flex items-center h-full p-4 gap-4">
        <div>
          <Avatar>
            <AvatarImage src={`http://localhost:3000${avatar}`} />
          </Avatar>
        </div>
        <div className="flex-grow flex justify-between">
          <div>
            <CardTitle>
              {firstName} {lastName}
            </CardTitle>
            <CardDescription>{description}</CardDescription>
          </div>
          <Link to={id}>
            <Button variant="ghost">
              <ChevronRight size={30} />
            </Button>
          </Link>
        </div>
      </CardContent>
    </Card>
  )
}

export default ContactCard
