import React from 'react'


export interface HoverCardsProps {
    image: string,
    description: string,
    link?: string,
}

export default function HoverCards({image, description, link}: HoverCardsProps) {
  return (
    <div className='flex flex-col overflow-hidden rounded-sm bg-white shadow-sm hover:transform hover:scale-105 transition-transform duration-300 ease-in-out'>
        <img src={image} alt={description} className='w-[191px] h-[150px] rounded-sm  object-cover min-h-[140px]'/>
        <div className='flex flex-col gap-1 p-2'>
            <p className='text-sm font-medium truncate'>{description}</p>
        </div>
        {
            link && (
                <a href={link} className='text-xs text-gray-500'>{link}</a>
            )
        }

    </div>
  )
}