import React, { useRef, useState } from "react";
import "./reels.css";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import { Autoplay, Pagination, Navigation } from "swiper/modules";

const Reels = ({ watch_and_shop }) => {
  console.log(watch_and_shop, "watch_and_shop");

  const reelsdata = [
    {
      video: "/assets/video/reels/reel1.mp4",
    },
    {
      video: "/assets/video/reels/reel2.mp4",
    },
    {
      video: "/assets/video/reels/reel1.mp4",
    },
    {
      video: "/assets/video/reels/reel2.mp4",
    },
    {
      video: "/assets/video/reels/reel1.mp4",
    },
    {
      video: "/assets/video/reels/reel2.mp4",
    },
    {
      video: "/assets/video/reels/reel1.mp4",
    },
    {
      video: "/assets/video/reels/reel2.mp4",
    },
  ];

  return (
    <section className="reels_section">
      <div className="container">
        <div className="slidermain">
          <div className="heading_holder">
            <h3 className="heading_text">Explore Our Best Seller</h3>
          </div>
          <Swiper
            // slidesPerView={1}
            spaceBetween={10}
            // autoplay={{
            //     delay: 3000,
            //     disableOnInteraction: false,
            //     pauseOnMouseEnter: true
            // }}
            pagination={{ clickable: true }}
            navigation={false}
            observer={false}
            observeParents={false}
            resizeObserver={false}
            modules={[Autoplay, Pagination, Navigation]}
            breakpoints={{
              0: {
                slidesPerView: 2,
                spaceBetween: 5,
              },
              420: {
                slidesPerView: 3,
                spaceBetween: 10,
              },
              768: {
                slidesPerView: 4,
                spaceBetween: 15,
              },
              1200: {
                slidesPerView: 5,
                spaceBetween: 20,
              },
            }}
            className="mySwiper"
          >
            {watch_and_shop?.map((data, index) => (
              <SwiperSlide key={index}>
                <div className="video_div">
                  <video className="reelvdo" autoPlay muted loop playsInline>
                    <source
                      src={process.env.NEXT_PUBLIC_IMG_URL + data.video}
                      type="video/mp4"
                    />
                  </video>
                </div>
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      </div>
    </section>
  );
};

export default Reels;
