import React, { useEffect } from "react";
import "./Popular_Product.css";
import {
  getAllTimeFavsProducts,
} from "../../../features/products/productsSlice";
import { useDispatch, useSelector } from "react-redux";
import { encodeId } from "../../../utils/common";
import { useRouter } from "next/navigation";

const Popular_Product = () => {  

  const navigate = useRouter();

  const dispatch = useDispatch();

  const PopulerProducts = useSelector((state) => state.product.allProductsFavs);

  useEffect(() => {
    dispatch(getAllTimeFavsProducts({}));
  }, [dispatch]);

  

  return (
    <section className="Popular_Product">
      <div className="heading_div">
        <p className="card_title">Popular</p>
      </div>
      <section className="Product_Card">
        {PopulerProducts?.map((item,index) => {
          return (
            <div
              className="prod_descn"
              onClick={() => navigate.push(`/product-details/${encodeId(item?.id)}`)}
              key={index}
            >
              <div className="img_holder">
                <img
                  src={process.env.NEXT_PUBLIC_IMG_URL + item?.image}
                  className="prod_img"
                />
              </div>
              <div className="text_holder">
                <p className="title">{item?.name}</p>
                <p className="price">₹ {item?.Product_Variants[0]?.price}</p>
              </div>
            </div>
          );
        })}
      </section>
    </section>
  );
};

export default Popular_Product;
