"use client";

import React, { useEffect, useState } from "react";
import "./Product_details_swiper.css";

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

import "swiper/css";
import "swiper/css/navigation";

import Best_seller_heart from "../../common-components/product_card/Best_seller_heart/Best_seller_heart";

function Product_details_swiper({ product }) {
  const [activeImage, setActiveImage] = useState("");

  useEffect(() => {
    if (product?.image) {
      setActiveImage(product.image);
    }
  }, [product]);

  const imageUrl = process.env.NEXT_PUBLIC_IMG_URL;

  return (
    <section className="SG_Product_details">
      <div className="SG_Product_details_gallery">
        {/* THUMBNAIL */}

        <div className="SG_Product_details_thumbs">
          <Swiper
            direction="vertical"
            slidesPerView={4}
            spaceBetween={15}
            navigation={true}
            modules={[Navigation]}
            breakpoints={{
              0: {
                direction: "horizontal",
                slidesPerView: 4,
              },

              768: {
                direction: "vertical",
                slidesPerView: 4,
              },
            }}
            className="SG_Product_thumb_slider"
          >
            {product?.Product_Images?.map((item, index) => (
              <SwiperSlide key={index}>
                <div
                  className={`SG_Product_details_thumb_item

                ${activeImage === item.image ? "active" : ""}`}
                  onClick={() => setActiveImage(item.image)}
                >
                  <img src={imageUrl + item.image} alt="product thumb" />
                </div>
              </SwiperSlide>
            ))}
          </Swiper>
        </div>

        {/* MAIN IMAGE */}

        <div className="SG_Product_details_main">
          <div className="SG_Product_details_badge">Premium Quality</div>

          <div className="SG_Product_details_wishlist">
            <Best_seller_heart product={product} />
          </div>

          <div className="SG_Product_details_image_box">
            <img
              className="SG_Product_details_main_img"
              src={imageUrl + activeImage}
              alt="Product"
            />
          </div>
        </div>
      </div>
    </section>
  );
}

export default Product_details_swiper;
