import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";


import "./Demo_Product.css";
import { Link, useNavigate } from "react-router-dom";
import { Navigation, Pagination } from 'swiper/modules';
import "swiper/css";
import 'swiper/css/navigation';
import "swiper/css/pagination";

function Demo_Product({ products, breakpoints, setSelectId, selectId }) {
  const navigate = useNavigate();
  return (
    <section className="Demo_Product_holder">
      <div className="container-fluid">
        <div className="Demo_Product_holder_swiper_holder">
          <Swiper
            modules={[Pagination, Navigation]}
            // navigation={true}
            spaceBetween={10}
            loop={true}
            slidesPerView={4}
            // pagination={{ clickable: true }}
            breakpoints={{
              0: {
                slidesPerView: 2,
                spaceBetween: 5
              },
              350: {
                slidesPerView: 3,
                spaceBetween: 5
              },
              575: {
                slidesPerView: 4,
                spaceBetween: 10
              },
              768: {
                slidesPerView: 5,
                spaceBetween: 10
              },
              992: {
                slidesPerView: 8,
                spaceBetween: 10
              },
              1200: {
                slidesPerView: 8,
                spaceBetween: 10
              },
            }}
          >


            {products?.map((product, index) => (
              <SwiperSlide key={index}>
                <div className="Demo_Product">
                  <div className="product-card">
                    <div
                      className="img_holder"

                      onClick={() =>
                        setSelectId(product?.id)
                      }
                    >

                      <img
                        className="Product_img"
                        src={process.env.NEXT_PUBLIC_IMG_URL + product.image}
                        alt={product.name}
                      />

                    </div>
                    <p className="product-name">{product.name}</p>
                  </div>
                </div>
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      </div>
    </section>
  );
}

export default Demo_Product;
