import React from "react";
import "./Product_card.css";
import Brown_btn from "../common_btn/brown_btn/Brown_btn";
import Discount_holder from "./discount_holder/Discount_holder";
import Best_seller_heart from "./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 Link from "next/link";

function Product_card({ product,savingPrice }) {       

  

  return (
    <>
      <section className="Product_card card">
        <div className="card-body">

          <div className="img_content_holder">
            <Link href={`/product-details/${encodeId(product?.id)}`}>
              <div className="img_holder">
                <img
                  className="Product_img"
                  src={process.env.NEXT_PUBLIC_IMG_URL + product?.image}
                  alt={"Product_img"}
                />
              </div>
            </Link>
            <div className="discount_circle_holder">
              <Discount_holder
                discount={Math.round(
                  ((product?.Product_Variants[0]?.mrp -
                    product?.Product_Variants[0]?.price) /
                    product?.Product_Variants[0]?.mrp) *
                  100
                )}
              />
            </div>

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

            <div className="Add_to_cart_holder">
              <Add_to_card_btn id={product?.id} product={product}/>
            </div>
          </div>
        </div>
        <div className="card-footer">
          <div className="info_holder">
            <div className="text_holder">
              <p>{product?.name}</p>
            </div>
            <div className="btn_holder">
              <Brown_btn
                btnText={
                  <>
                    ₹ {product?.Product_Variants[0]?.price} Regular Price ({product?.Product_Variants[0]?.mrp}){" "}
                    <span>Your Savings: ₹ {savingPrice}</span>{" "}
                  </>
                }
              />
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

export default Product_card;
