import Image from 'next/image'
import { FC } from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'

const SWIPER_SLIDE_STYLE = {
    overflow: 'visible !important',
    // width: 220,
}

type Props = {
    images: { id: string, imageUrl: string }[]
}

const ServiceImages: FC<Props> = ({ images }) => {
    return (
        <div className='w-full mt-8'>
            <Swiper
                className='w-full'
                spaceBetween={20} // فاصله پیش‌فرض بین اسلایدها
                slidesPerView='auto'
            >

                {
                    images.map((item) => {
                        return (
                            <SwiperSlide key={item.id} className='max-w-[38%]' style={SWIPER_SLIDE_STYLE}>
                                <div className='bg-white bg-opacity-50 w-full p-2 rounded-2xl'>
                                    <Image alt={item.imageUrl} width={2000} height={1000} src={item.imageUrl} className='w-full h-auto rounded-2xl' />
                                </div>
                            </SwiperSlide>
                        )
                    })
                }
            </Swiper>
        </div>
    )
}

export default ServiceImages