import React from "react";
import "./Product_Info_Card.css";
import Best_seller_heart from "../product_card/Best_seller_heart/Best_seller_heart";
import Add_to_card_btn from "../common_btn/Add_to_card_btn/Add_to_card_btn";
import { encodeId } from "../../../utils/common";
import { useRouter } from "next/navigation";
import Link from "next/link";

const Product_Info_Card = ({
  id,
  imgSrc,
  vdoSrc,
  productName,
  priceText,
  mrp,
  product,
}) => {
  const navigate = useRouter();

  const rating = product?.rating || product?.average_rating || 5;
  const reviewCount =
    product?.review_count ||
    product?.reviews_count ||
    product?.total_reviews ||
    0;

  const discount =
    Number(mrp) > Number(priceText)
      ? (((Number(mrp) - Number(priceText)) / Number(mrp)) * 100).toFixed(0)
      : 0;

  return (
    <section className="Product_Info_Card_Section">
      <div className="Product_Info_Card">
        <div className="upper_image_section">
          <Link href={`/product-details/${encodeId(product?.id)}`}>
            <div className="card_img_holder">
              <img src={imgSrc} alt={productName} />
            </div>
          </Link>

          <div className="text_div">
            {discount > 0 && (
              <div className="discont_div">
                <p className="discount_text">{discount}% Off</p>
              </div>
            )}
          </div>

          <Best_seller_heart product={product} />
        </div>

        <div className="lower_text_section">
          <p
            className="product_name"
            onClick={() => {
              navigate.push(`/product-details/${encodeId(product?.id)}`);
            }}
          >
            {productName}
          </p>

          <div className="pricing_div">
            <div className="left_side">
              <p className="selling_price">₹{priceText}</p>

              {Number(mrp) > Number(priceText) && <p className="mrp">₹{mrp}</p>}
            </div>
          </div>

          <div className="text-center btn_holder">
            <Add_to_card_btn id={product?.id} product={product} />
          </div>
        </div>
      </div>
    </section>
  );
};

export default Product_Info_Card;
