import CloseModalD from '@/components/icons/CloseModalD'
import Image from 'next/image'

const maps = [
    { src: '/assets/images/snapp.png', name: 'snapp' },
    { src: '/assets/images/tapsi.png', name: 'tapsi' },
    { src: '/assets/images/maps.png', name: 'maps' },
    { src: '/assets/images/balad.png', name: 'balad' },
    { src: '/assets/images/waze.png', name: 'waze' }
]

function Content({ handleClose }) {
    return (
        <>
            <div className="flex items-center justify-between">
                <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">باز شدن با</p>
                <div className="cursor-pointer" onClick={handleClose}>
                    <CloseModalD />
                </div>
            </div>
            <span className="bg-[#EFEFEF] block h-px w-full mt-[12px] mb-[22px]"></span>
            <ul className="flex items-center justify-center gap-[32px] md:gap-[36px] lg:gap-[40px] mx-auto flex-wrap md:flex-nowrap md:mx-[72px]">
                {maps.map((item, idx) => (
                    <li className="flex items-center flex-col justify-center gap-1">
                        <Image
                            className='w-[32px] h-[32px] lg:w-[40px] lg:h-[40px]'
                            src={item.src}
                            alt="icon app"
                            height={40}
                            width={40}
                        />
                        <p className="text-[#3B3B3B] font-normal text-[14px]">{item.name}</p>
                    </li>
                ))}
            </ul>
        </>
    )
}

export default Content