import React, { Fragment } from "react";

// Import Swiper
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Navigation, Pagination } from "swiper";

// Import Images
import client1 from "/assets/images/client/client-1.svg"
import client2 from "/assets/images/client/client-2.svg"
import client3 from "/assets/images/client/client-3.svg"
import client5 from "/assets/images/client/client-5.svg"
import client6 from "/assets/images/client/client-6.svg"
import client7 from "/assets/images/client/client-7.svg"

// Client Data Array
const Client_Data = [
    { img: client1 },
    { img: client2 },
    { img: client3 },
    { img: client1 },
    { img: client5 },
    { img: client6 },
    { img: client7 },
]
const OurClientSwiperComp = (props) => {

    const { classNames } = props

    return (
        <>
            <div className="swiper-container swiper-general">
                <Swiper

                    navigation={[
                    prevEl: ".swiper-button-prev",
                    nextEl: ".swiper-button-next",
                    ]}
                    loop={true}
                    spaceBetween={20}
                    autoplay={[
                        delay: 3000,
                        disableOnInteraction: false,
                    ]}
                    modules={[Navigation, Pagination, Autoplay]}
                    tag="ul"
                    className="p-0 m-0 list-inline"
                    breakpoints={[
                        0: {
                            slidesPerView: 1,
                        },
                        576: {
                            slidesPerView: 2,
                        },
                        768: {
                            slidesPerView: 2,
                        },
                        1024: {
                            slidesPerView: 6,
                        },
                        1500: {
                            slidesPerView: 6,
                        },
                    ]}
                // pagination={[ el: '.swiper-pagination', clickable: true ]}
                >
                    {Client_Data.map((data, index) => {
                        return (
                            <Fragment key={index}>
                                <SwiperSlide key={index} tag="li">
                                    <div className="our-client-img bg-light rounded-3 text-center">
                                        <img src={data.img} alt="client" className={classNames}></img>
                                    </div>
                                </SwiperSlide>
                            </Fragment>
                        );
                    })}
                </Swiper>
                <div className="swiper-pagination"></div>

            </div>
        </>
    )
}

export default OurClientSwiperComp