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

import { Navigation, Autoplay, Pagination } 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 OurMembers = () => {
  const ourMembersData = [
    {
      image: "/images/our-members/01.png",
      name: "Dave Smith",
      disc: "Lorem ipsum dolor sit amet, "
    },
    {
      image: "/images/our-members/02.png",
      name: "Silva Johnson",
      disc: "Lorem ipsum dolor sit amet, "
    },
    {
      image: "/images/our-members/03.png",
      name: "Will Miller",
      disc: "Lorem ipsum dolor sit amet, "
    },
    {
      image: "/images/our-members/04.png",
      name: "Noah Jones",
      disc: "Lorem ipsum dolor sit amet, "
    }
  ];
  return (
    <section className="our-members-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>Members</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: ".aboutus-arrow-left", prevEl: ".aboutus-arrow-right" }}
              pagination={{
                clickable: true
              }}
              autoHeight={true}
              breakpoints={{
                640: {
                  slidesPerView: 1,
                  spaceBetween: 20,
                  autoplay: true
                },
                768: {
                  slidesPerView: 4,
                  spaceBetween: 40
                },
                1024: {
                  slidesPerView: 4,
                  spaceBetween: 40
                }
              }}
              modules={[Navigation, Autoplay, Pagination]}
              className="mySwiper01 mySwiper02"
            >
              {ourMembersData &&
                ourMembersData.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-member-item">
                          <div className="img">
                            <span className="image-container">
                              <Image layout="fill" alt="" className="image img-fluid" src={data.image} />
                            </span>
                          </div>
                          <div className="details">
                            <div className="name"> {data.name}</div>
                            <div className="disc"> {data.disc} </div>
                          </div>
                        </div>
                      </motion.div>
                    </SwiperSlide>
                  );
                })}
            </Swiper>
            <div className="swiper-nav">
              <div className="navbutton d-flex justify-content-between ">
                <button className="aboutus-arrow-right arrow">
                  <span className="image-container">
                    <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
                  </span>
                </button>
                <button className="aboutus-arrow-left 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 OurMembers;