import React from "react";
import "./Shop_By_Shape.css";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper/modules";
import { useNavigate } from "react-router-dom";

const shapess = [
  { label: "Round", img: "/assets/images/ring_designs/img1.png" },
  { label: "Oval", img: "/assets/images/ring_designs/img2.png" },
  { label: "Princess", img: "/assets/images/ring_designs/img3.png" },
  { label: "Emerald", img: "/assets/images/ring_designs/img4.png" },
  { label: "Radiant", img: "/assets/images/ring_designs/img5.png" },
  { label: "Heart", img: "/assets/images/ring_designs/img6.png" },
  { label: "Cushion", img: "/assets/images/ring_designs/img7.png" },
  { label: "Pear", img: "/assets/images/ring_designs/img8.png" },
  { label: "Marquise", img: "/assets/images/ring_designs/img9.png" },
  { label: "Asscher", img: "/assets/images/ring_designs/img10.png" },
];

const Shop_By_Shape = ({ shapes, setShapeId }) => {
  const nevigate = useNavigate();
  return (
    <section className="Shop_By_Shape">
      <div className="container">
        <div className="shape-swiper">
          <h4 class="heading_text">Shop by Style</h4>
          <Swiper
            modules={[Navigation]}
            navigation
            loop={true}
            spaceBetween={5}
            breakpoints={{
              0: {
                slidesPerView: 2,
                spaceBetween: 5,
              },
              350: {
                slidesPerView: 3,
                spaceBetween: 5,
              },
              575: {
                slidesPerView: 4,
                spaceBetween: 10,
              },
              768: {
                slidesPerView: 5,
                spaceBetween: 10,
              },
              992: {
                slidesPerView: 6,
                spaceBetween: 10,
              },
              1200: {
                slidesPerView: 6,
                spaceBetween: 10,
              },
              1200: {
                slidesPerView: 8,
                spaceBetween: 10,
              },
            }}
          >
            {shapes?.map((item, index) => (
              <SwiperSlide
                key={index}
                onClick={() => nevigate(`/product-style?shape_id=${item?.id}`)}
              >
                <div className="shape-item">
                  <div className="shape-img-wrapper">
                    <img
                      src={process.env.NEXT_PUBLIC_IMG_URL + item.image}
                      alt={item.name}
                    />
                  </div>
                  <div className="shape-label">{item.name}</div>
                </div>
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      </div>
    </section>
  );
};
export default Shop_By_Shape;
