import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { motion } from "framer-motion";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { Pagination, Navigation, Autoplay } from "swiper/modules";
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import Image from "next/image.js";
import { cleanImage } from "../../services/imageHandling.js";

const Banner = ({ homeBanner }) => {
  return (
    <>
      <section className="home-banner">
        <div>
          <Swiper
            slidesPerView={1}
            // autoplay={{
            //   delay: 9000,
            //   disableOnInteraction: false
            // }}
            autoplay={false}
            spaceBetween={10}
            navigation={true}
            pagination={{
              clickable: true
            }}
            // breakpoints={{
            //   640: {
            //     slidesPerView: 2,
            //     spaceBetween: 20
            //   },
            //   768: {
            //     slidesPerView: 4,
            //     spaceBetween: 40
            //   },
            //   1024: {
            //     slidesPerView: 5,
            //     spaceBetween: 50
            //   }
            // }}
            modules={[Pagination, Navigation, Autoplay]}
            className="mySwiper01"
          >
            {
              /*map through the array of images*/
              homeBanner?.data &&
                homeBanner?.data.map((data, index) => {
                  return (
                    <SwiperSlide>
                      <div className="slider-item slider-item-01">
                        <div className="home-banner-bg">
                          <span className="image-container hide-on-mobile">
                            {console.log("clean image", cleanImage(data?.attributes?.desktopBanner?.data?.attributes))}
                            <img layout="fill" className="image img-fluid" alt="" src={cleanImage(data?.attributes?.desktopBanner?.data?.attributes)} />
                          </span>
                          <span className="image-container hide-on-desktop">
                            <img layout="fill" className="image img-fluid" alt="" src={cleanImage(data?.attributes?.mobileBanner?.data?.attributes)} />
                          </span>
                        </div>
                        <div className="d-table">
                          <div className="d-table-cell">
                            <div className="container">
                              <motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
                                <div className="row">
                                  <div className="col-md-6">
                                    <div className="slider-text">
                                      <div className="banner-title">
                                        <div className="banner-txt">
                                          <h1>{data?.attributes?.title}</h1>
                                          <div className="title">{data?.attributes?.subTitle}</div>
                                          <div className="disc">{data?.attributes?.discription}</div>
                                        </div>
                                      </div>
                                      {/* <div className="common-btn">
                                        <a className="btn btn-primary" href={data?.attributes?.exploreNowButton}>
                                          Explore Now
                                        </a>
                                      </div> */}
                                    </div>
                                  </div>
                                </div>
                              </motion.div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </SwiperSlide>
                  );
                })
            }
          </Swiper>
        </div>
      </section>
    </>
  );
};

export default Banner;