import React from 'react'
import { LazyLoadImage } from 'react-lazy-load-image-component';
import { BiDownload } from "react-icons/bi";
import FileSaver from "file-saver"



const Card = ({item}) => {

  return (
    <div className='flex relative [&:nth-child(5n+1)]:col-span-2'>
        <LazyLoadImage 
            src={item?.photo}
            alt={item?.prompt}
            width='100%'
            height='100%'
        />
        <div className='flex flex-col justify-end absolute p-2 md:p-5 top-0 left-0 right-0 bottom-0 items-start gap-1 backdrop-blur-sm opacity-0 hover:opacity-100 duration-300'>
            <p className='flex gap-5'>{item?.prompt}</p>
            <div className='w-full flex justify-between items-center'>
                <p className='flex items-center justify-center gap-1'><span className='w-6 h-6 flex bg-gray-100 text-black rounded-full items-center justify-center'>{item?.name[0]}</span>{item.name}</p>
                <button onClick={() => FileSaver.saveAs(item?.photo, 'download.jpg')} className='md:text-2xl'><BiDownload/></button>
            </div>
        </div>
    </div>
  )
}

export default Card