import React from "react";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { Swiper, SwiperSlide } from "swiper/react";

import { Navigation, Autoplay } from "swiper/modules";
import { motion } from "framer-motion";
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import Image from "next/image.js";
const OurPartners = () => {
  const ourPartnersData = [
    {
      image: "/images/our-partners/01.svg"
    },
    {
      image: "/images/our-partners/01.svg"
    },
    {
      image: "/images/our-partners/01.svg"
    },
    {
      image: "/images/our-partners/01.svg"
    }
  ];
  return (
    <section className="our-partners-session">
      <div className="container">
        <div className="row">
          <div className="col-12">
            <div className="head-btn">
              <motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
                <div className="head01">
                  <div className="title">Our</div>
                  <h2>Partners</h2>
                </div>
              </motion.div>
            </div>
          </div>
        </div>
        <div className="row">
          <div className="col-12">
          <div className=" position-relative">
            <Swiper
              slidesPerView={1}
              loop={false}
              spaceBetween={10}
              navigation={{ nextEl: ".arrow-left-op", prevEl: ".arrow-right-op" }}
              breakpoints={{
                640: {
                  slidesPerView: 1,
                  spaceBetween: 20,
                  autoplay: true
                },
                768: {
                  slidesPerView: 4,
                  spaceBetween: 40
                },
                1024: {
                  slidesPerView: 4,
                  spaceBetween: 40
                }
              }}
              modules={[Navigation, Autoplay]}
              className="mySwiper01 mySwiper02"
            >
              {ourPartnersData &&
                ourPartnersData.map((data, index) => {
                  return (
                    <SwiperSlide>
                      <motion.div
                        variants={zoomIn("left", 0.3)}
                        initial={"hidden"}
                        whileInView={"show"}
                        viewport={{ once: false, amount: 0.2 }}
                      >
                        <div className="our-partners-item">
                          <div className="img">
                            <span className="image-container">
                              <Image layout="fill" alt="" className="image img-fluid" src={data.image} />
                            </span>
                          </div>
                        </div>
                      </motion.div>
                    </SwiperSlide>
                  );
                })}
            </Swiper>
            <div className="swiper-nav">
              <div className="navbutton d-flex justify-content-between ">
                <button className="arrow-right-op arrow">
                  <span className="image-container">
                    <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
                  </span>
                </button>
                <button className="arrow-left-op arrow">
                  <span className="image-container">
                    <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
                  </span>
                </button>
              </div>
            </div>
          </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default OurPartners;