"use client";

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";

import { Container, Row, Col, Card, Button } from "react-bootstrap";

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">
      <Container>
        <div className="popular_header">
          <h3>Our Popular Oils</h3>
          <p>Pure quality oil for your healthy family</p>
        </div>

        <Row className="product_row">
          {PopulerProducts?.slice(0, 5)?.map((item, index) => (
            <Col
              key={index}
              lg={3}
              md={4}
              sm={6}
              xs={12}
              className="product_col"
            >
              <Card
                className="oil_product_card"
                onClick={() =>
                  navigate.push(`/product-details/${encodeId(item?.id)}`)
                }
              >
                <div className="oil_image_box">
                  <Card.Img
                    src={process.env.NEXT_PUBLIC_IMG_URL + item?.image}
                    className="oil_image"
                  />
                </div>

                <Card.Body>
                  <h5 className="oil_name">{item?.name}</h5>

                  <p className="oil_weight">
                    {item?.Product_Variants?.[0]?.weight || "Premium Quality"}
                  </p>
                </Card.Body>

                <Card.Footer>
                  <div className="price_section">
                    <div className="price_wrapper">
                      <span className="selling_price">
                        ₹ {item?.Product_Variants?.[0]?.price}
                      </span>

                      <span className="mrp_price">
                        ₹ {item?.Product_Variants?.[0]?.mrp}
                      </span>
                    </div>

                    <span className="discount_price">
                      Save ₹{" "}
                      {parseFloat(item?.Product_Variants?.[0]?.mrp || 0) -
                        parseFloat(item?.Product_Variants?.[0]?.price || 0)}
                    </span>
                  </div>
                </Card.Footer>
              </Card>
            </Col>
          ))}
        </Row>
      </Container>
    </section>
  );
};

export default Popular_Product;
