import React, { useEffect, useState } from "react";
import "./Product_details_swiper.css";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHeart as regularHeart } from "@fortawesome/free-regular-svg-icons";
import { faHeart as solidHeart } from "@fortawesome/free-solid-svg-icons";
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) {
      setActiveImage(product?.image);
    }
  }, [product]);

  return (
    <>
      <section className="Product_details_swiper">
        <div className="main_img_holder">
          <div className="img_holder">
            <img
              className="Product_img"
              src={process.env.NEXT_PUBLIC_IMG_URL + activeImage}
              // alt="Product_img"
            />
            {/* <img
              className="Product_img"
              // src={
              //     process.env.PUBLIC_URL +
              //     '/assets/images/product_details/ghee/Ghee-bottle.png'
              // }
              src={process.env.NEXT_PUBLIC_IMG_URL + product.image}
              alt="Product_img"
            /> */}
          </div>
          {/* <div className="like_icon_holder" onClick={toggleLike}>
            <FontAwesomeIcon
              className={`like_icon ${liked ? "active" : ""} ${sparkle ? "sparkle" : ""
                }`}
              icon={liked ? solidHeart : regularHeart}
            />
          </div> */}

          <div className="wishlist_div wishlist_swiper_div">
            <Best_seller_heart product={product} />
          </div>
        </div>

        <div className="swiper_holder">
          <Swiper
            slidesPerView={5}
            spaceBetween={10}
            className="Product_details_Swiper_holder"
          >
            {product?.Product_Images?.map((val) => (
              <SwiperSlide onClick={() => setActiveImage(val.image)}>
                <div
                  className={`img_holder ${
                    activeImage === val.image ? "active_thumb" : ""
                  }`}
                >
                  <img
                    className="Product_img"
                    src={process.env.NEXT_PUBLIC_IMG_URL + val?.image}
                    //   src={
                    //     process.env.PUBLIC_URL +
                    //     "/assets/images/product_details/ghee/ghee_1.png"
                    //   }
                    // alt={"Product_img"}
                  />
                </div>
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      </section>
    </>
  );
}

export default Product_details_swiper;
