import React from "react";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
import { Button } from "react-bootstrap";
import { Swiper, SwiperSlide } from "swiper/react";
// import {BlogData} from "../blogs/BlogsItem"

import { Navigation, Autoplay } from "swiper/modules";
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import { BlogData } from "../blog/BlogItem.js";
import Image from "next/image.js";
const MostReadBlogs = () => {
  return (
    <section className="most-read-blogs-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">Most Read</div>
                  <h2>Blogs</h2>
                </div>
              </motion.div>
              <div className="view-all-btn">
                <Button variant="primary">View All</Button>
              </div>
            </div>
          </div>
        </div>
        <div className="row">
          <div className="col-12 position-relative">
            <Swiper
              slidesPerView={1}
              // autoplay={{
              //   delay: 2500,
              //   disableOnInteraction: false
              // }}
              // spaceBetween={10}
              navigation={{ nextEl: ".most-read-blog-arrow-left", prevEl: ".most-read-blog-arrow-right" }}
              breakpoints={{
                640: {
                  slidesPerView: 1,
                  spaceBetween: 20
                },
                768: {
                  slidesPerView: 2,
                  spaceBetween: 40
                },
                1024: {
                  slidesPerView: 3,
                  spaceBetween: 20
                }
              }}
              modules={[Navigation, Autoplay]}
              className="mySwiper01 mySwiper02"
            >
              {BlogData &&
                BlogData.map(data => {
                  return (
                    <SwiperSlide>
                    <motion.div
                        variants={zoomIn("left", 0.3)}
                        initial={"hidden"}
                        whileInView={"show"}
                        viewport={{ once: false, amount: 0.2 }}
                      >
                        <div className="blog-item">
                          <div className="img-wrapper">
                            <span className="image-container">
                              <Image layout="fill" alt="" className="image img-fluid" src={data.image} />
                            </span>
                            <div className="top-rated">{data.flag}</div>
                          </div>
                          <div className="info">
                            <div className="read-row">
                              <span className="image-container">
                                <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/clock.svg" />
                              </span>
                              <div className="">{data.read}</div>
                            </div>
                            <div className="title">{data.title}</div>
                            <div className="discription">{data.discription}</div>
                            <div className="read-more">
                              <Button href="/listing" variant="primary">
                                Read More
                              </Button>
                            </div>
                          </div>
                        </div>
                      </motion.div>
                    </SwiperSlide>
                  );
                })}
            </Swiper>
            <div className="swiper-nav">
                  <div className="navbutton d-flex justify-content-between ">
                    <button className="most-read-blog-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="most-read-blog-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>
    </section>
  );
};

export default MostReadBlogs;