import Image from 'next/image'
import React from 'react'
import avatar from '@/assets/icons/avatar.svg'
import { ImageIcon } from 'lucide-react'
function CollectionGallery({ images }: { images: any }) {
    return (
        <div className=' flex flex-col gap-2'>
            <div className=' w-48 h-48  flex flex-row gap-1 aspect-square cursor-pointer relative mt-10'>
                <div className=' h-full w-1/2'>
                    <Image
                        src={images[0]?.src ?? avatar}
                        alt={''}
                        width={400}
                        height={400}
                        className='w-full h-full rounded-l-lg object-cover border border-white'
                    />
                </div>
                <div className='h-full w-1/2 flex flex-col gap-1 '>
                    <Image
                        src={images[1]?.src ?? avatar}
                        alt={''}
                        width={400}
                        height={400}
                        className='w-full h-full rounded-tr-lg object-cover border border-white'
                    />
                    <Image
                        src={images[2]?.src ?? avatar}
                        alt={''}
                        width={400}
                        height={400}
                        className='w-full h-full rounded-br-lg object-cover border border-white'
                    />
                </div>
                <div className=' absolute right-[-5px] top-[-10px] z-10 bg-red-600 rounded-full px-2 flex justify-center items-center'>
                    <span>x</span>
                </div>
            </div>
            <div className='flex flex-row gap-2 items-center justify-between mx-2'>
                <span className=' text-[12px] text-white font-light'>Title: New Models</span>
                <div className=' flex flex-row gap-2 items-center'>
                    <ImageIcon size={16} />
                    <span className=' text-[14px] text-white font-light'>{images && images?.length}</span>
                </div>
            </div>
        </div>
    )
}

export default CollectionGallery