import { FC } from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
import AppImage from '../../../assets/images/appimage.png'

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

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

                <SwiperSlide className='max-w-[38%]' style={SWIPER_SLIDE_STYLE}>
                    <div className='bg-white bg-opacity-50 w-full p-2 rounded-2xl'>
                        <img src={AppImage} className='w-full' />
                    </div>
                </SwiperSlide>
                <SwiperSlide className='max-w-[38%]' style={SWIPER_SLIDE_STYLE}>
                    <div className='bg-white bg-opacity-50 w-full p-2 rounded-2xl'>
                        <img src={AppImage} className='w-full' />
                    </div>
                </SwiperSlide>
                <SwiperSlide className='max-w-[38%]' style={SWIPER_SLIDE_STYLE}>
                    <div className='bg-white bg-opacity-50 w-full p-2 rounded-2xl'>
                        <img src={AppImage} className='w-full' />
                    </div>
                </SwiperSlide>
                <SwiperSlide className='max-w-[38%]' style={SWIPER_SLIDE_STYLE}>
                    <div className='bg-white bg-opacity-50 w-full p-2 rounded-2xl'>
                        <img src={AppImage} className='w-full' />
                    </div>
                </SwiperSlide>
            </Swiper>
        </div>
    )
}

export default ServiceImages