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

// import "swiper/css";
// import "swiper/css/navigation";
// import "./Image_Swipper.css";

// const shapes = [
//   { 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 ImageSwipper = () => {
//   return (
//     <div className="shape-swiper">
//       <Swiper
//         modules={[Navigation]}
//         navigation
//         spaceBetween={24}
//         breakpoints={{
//           0: {
//             slidesPerView: 3, 
//           },
//           574: {
//             slidesPerView: 4,
//           },
//           768: {
//             slidesPerView: 5, 
//           },
//           992: {
//             slidesPerView: 8, 
//           },
//           1200: {
//             slidesPerView: 10, 
//           },
//         }}
//       >
//         {shapes.map((item, index) => (
//           <SwiperSlide key={index}>
//             <div className="shape-item">
//               <div className="shape-img-wrapper">
//                 <img src={item.img} alt={item.label} />
//               </div>
//               <div className="shape-label">{item.label}</div>
//             </div>
//           </SwiperSlide>
//         ))}
//       </Swiper>
//     </div>
//   );
// };

// export default ImageSwipper;
