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={"false"} 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={"false"}
                          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;