import {Link} from 'react-router-dom'

const ListingCard = ({listing}) => {
  return (
    <div className='bg-white shadow-md hover:shadow-lg transition-shadow overflow-hidden rounded-md w-full sm:w-[230px]'>
        <Link to={`/listing/${listing._id}`}>
            <img src={listing.imageUrls[0]} alt="" className='h-[150px] sm:h-[150px] w-full object-cover hover:scale-105 transition-scale duration-300'/>
            <div className="p-2">
                <p className='font-semibold text-gray-800 text-xl truncate mt-2 mb-1'>
                    ${listing.offer ? listing.discountPrice.toLocaleString('en-Us') : listing.currentPrice.toLocaleString('en-Us')}
                    {listing.type === 'rent' && '/month'}
                </p>
                <div className="flex mb-1 gap-2">
                    <p className='text-sm'><span className='font-bold'>{listing.bed}</span> bds |</p>
                    <p className='text-sm'><span className='font-bold'>{listing.bath}</span> ba </p>
                </div>
                <div className='mb-4'>
                    <p className="text-sm truncate">{listing.address}</p>
                </div>
            </div>
        </Link>
    </div>
  )
}

export default ListingCard