// import React from "react";
// import "./Offer_Products.css";
// import { Swiper, SwiperSlide } from "swiper/react";
// import { Autoplay } from "swiper/modules";
// import "swiper/css";

// import Product_Info_Card from "../../common-components/product_info_card/Product_Info_Card";
// import Common_Heading_Round_holder from "../../common-components/common_Heading_Round_holder/Common_Heading_Round_holder";

// const Offer_Products = ({topsellingproducts}) => {
//   const products = [
//     {
//       id: 1,
//       product_name: "Nescafe Classic",
//       img: "/assets/images/products/img6.png",
//       sub_text: "Price per kg",
//       rating: "4.5",
//       selling_price: "120",
//       mrp: "150",
//       discount: "10",
//       outOfStock: false,
//       company: "Nescafe",
//     },
//     {
//       id: 2,
//       product_name: "Nescafe Classic",
//       img: "/assets/images/products/img6.png",
//       sub_text: "Price per kg",
//       rating: "4.5",
//       selling_price: "120",
//       mrp: "150",
//       discount: "10",
//       outOfStock: true,
//       company: "Kellog's",
//     },
//     {
//       id: 3,
//       product_name: "Nescafe Classic",
//       img: "/assets/images/products/img6.png",
//       sub_text: "Price per kg",
//       rating: "4.5",
//       selling_price: "120",
//       mrp: "150",
//       discount: "10",
//       outOfStock: false,
//       company: "Nescafe",
//     },
//     {
//       id: 4,
//       product_name: "Nescafe Classic",
//       img: "/assets/images/products/img6.png",
//       sub_text: "Price per kg",
//       rating: "4.5",
//       selling_price: "120",
//       mrp: "150",
//       discount: "10",
//       outOfStock: false,
//       company: "Nescafe",
//     },
//     {
//       id: 5,
//       product_name: "Nescafe Classic",
//       img: "/assets/images/products/img6.png",
//       sub_text: "Price per kg",
//       rating: "4.5",
//       selling_price: "120",
//       mrp: "150",
//       discount: "10",
//       outOfStock: false,
//       company: "Nescafe",
//     },
//     {
//       id: 6,
//       product_name: "Nescafe Classic",
//       img: "/assets/images/products/img6.png",
//       sub_text: "Price per kg",
//       rating: "4.5",
//       selling_price: "120",
//       mrp: "150",
//       discount: "10",
//       outOfStock: false,
//       company: "Nescafe",
//     },
//     {
//       id: 7,
//       product_name: "Nescafe Classic",
//       img: "/assets/images/products/img6.png",
//       sub_text: "Price per kg",
//       rating: "4.5",
//       selling_price: "120",
//       mrp: "150",
//       discount: "10",
//       outOfStock: false,
//       company: "Nescafe",
//     },
//     {
//       id: 8,
//       product_name: "Nescafe Classic",
//       img: "/assets/images/products/img6.png",
//       sub_text: "Price per kg",
//       rating: "4.5",
//       selling_price: "120",
//       mrp: "150",
//       discount: "10",
//       outOfStock: false,
//       company: "Nescafe",
//     },
//   ];

//   console.log(topsellingproducts," topsellingproducts__+++")

//   return (
//     <section className="Offer_Products">
//       <Common_Heading_Round_holder headingText="Top Selling Products" />

//       <div className="main_swiper_div">
//         <Swiper
//           spaceBetween={15}
//           modules={[Autoplay]}
//           autoplay={{
//             delay: 2000,
//             disableOnInteraction: false,
//           }}
//           loop={true}
//           className="common_swiper"
//           breakpoints={{
//             0: {
//               slidesPerView: 2,
//               spaceBetween: 10,
//             },
//             350: {
//               slidesPerView: 2,
//               spaceBetween: 10,
//             },
//             486: {
//               slidesPerView: 2.5,
//               spaceBetween: 10,
//             },
//             576: {
//               slidesPerView: 2.5,
//               spaceBetween: 10,
//             },
//             768: {
//               slidesPerView: 3.5,
//               spaceBetween: 10,
//             },
//             992: {
//               slidesPerView: 4.8,
//               spaceBetween: 10,
//             },
//             1200: {
//               slidesPerView: 5.3,
//               spaceBetween: 10,
//             },
//             1300: {
//               slidesPerView: 6,
//               spaceBetween: 10,
//             },
//           }}
//         >
//           {topsellingproducts?.data?.data.map((product) => (
//             <SwiperSlide className="product-slide" key={product.id}>
//               <Product_Info_Card
//                 product={product}
//                 id={product.id}
//                 imgSrc={process.env.NEXT_PUBLIC_IMG_URL + product.image}
//                 productName={product.name}
//                 priceText={product.Product_Variants[0]?.price}
//                 mrp={product.Product_Variants[0]?.mrp}
//                 savingPrice={
//                   parseFloat(product.Product_Variants[0]?.mrp) - parseFloat(product.Product_Variants[0]?.price)
//                 }
//                 showQty
//               />
//             </SwiperSlide>
//           ))}
//         </Swiper>
//       </div>
//     </section>
//   );
// };

// export default Offer_Products;

import React from "react";
import "./Offer_Products.css";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper/modules";
import "swiper/css";

import Product_Info_Card from "../../common-components/product_info_card/Product_Info_Card";
import Common_Heading_Round_holder from "../../common-components/common_Heading_Round_holder/Common_Heading_Round_holder";
import { variant_type } from "../../../utils/common"; // adjust path to match your actual utils/common location

const Offer_Products = ({ topsellingproducts }) => {
  const products = topsellingproducts?.data?.data || [];

  if (products.length === 0) {
    return null;
  }

  return (
    <section className="Offer_Products">
      <Common_Heading_Round_holder headingText="Top Selling Products" />

      <div className="main_swiper_div">
        <Swiper
          spaceBetween={15}
          modules={[Autoplay]}
          autoplay={{
            delay: 2000,
            disableOnInteraction: false,
          }}
          loop={true}
          className="common_swiper"
          breakpoints={{
            0: { slidesPerView: 2, spaceBetween: 10 },
            350: { slidesPerView: 2, spaceBetween: 10 },
            486: { slidesPerView: 2.5, spaceBetween: 10 },
            576: { slidesPerView: 2.5, spaceBetween: 10 },
            768: { slidesPerView: 3.5, spaceBetween: 10 },
            992: { slidesPerView: 4.8, spaceBetween: 10 },
            1200: { slidesPerView: 5.3, spaceBetween: 10 },
            1300: { slidesPerView: 6, spaceBetween: 10 },
          }}
        >
          {topsellingproducts?.data?.data.map((product) => {
            let metal, size, triple;

            if (
              Number(product?.variant_type_id) === Number(variant_type.Single)
            ) {
              metal = product?.Product_Variants?.[0];
            } else if (
              Number(product?.variant_type_id) === Number(variant_type.Double)
            ) {
              metal = product?.Product_Variants?.[0];
              size = metal?.Double_Variants?.[0];
            } else if (
              Number(product?.variant_type_id) === Number(variant_type.Triple)
            ) {
              metal = product?.Product_Variants?.[0];
              size = metal?.Double_Variants?.[0];
              triple = size?.Triple_Variants?.[0];
            }

            const activeVariant = triple || size || metal;

            return (
              <SwiperSlide className="product-slide" key={product.id}>
                <Product_Info_Card
                  product={product}
                  id={product.id}
                  imgSrc={process.env.NEXT_PUBLIC_IMG_URL + product.image}
                  vdoSrc={process.env.NEXT_PUBLIC_IMG_URL + product.video}
                  productName={product.name}
                  priceText={activeVariant?.price || 0}
                  mrp={activeVariant?.mrp || 0}
                  kgText={activeVariant?.name}
                  savingPrice={
                    parseFloat(activeVariant?.mrp || 0) -
                    parseFloat(activeVariant?.price || 0)
                  }
                  showQty
                />
              </SwiperSlide>
            );
          })}
        </Swiper>
      </div>
    </section>
  );
};

export default Offer_Products;
