import React, { useState } 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 { useSelector } from "react-redux";
import { useRouter } from "next/navigation";
import Link from "next/link";


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

  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 className="" src={imgSrc} alt={productName} />
              </div>
            </Link>

            <div className="text_div">
              <div className="discont_div">
                <p className="discount_text">
                  {`${(
                    ((Number(mrp) - Number(priceText)) /
                      Number(mrp)) *
                    100
                  ).toFixed(0)}%`} Off
                  
                </p>
              </div>

              {product?.company && (
                <div className="company_div">
                  <p className="company_text">{product?.company}</p>
                </div>
              )}
            </div>
          </div>

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

            <div className="pricing_div">
              {/* {showQty && (
                <div className="kilo_main_div">
                  <div
                    className="kilo_div"
                    onClick={() => setUnitOpen(!unitOpen)}
                  >
                    <div>
                      <p className="kilo_text">150 ML</p>
                    </div>

                    <div>
                      <p className="icon_p">
                        <FontAwesomeIcon
                          icon={faSortDown}
                          className="down_icon"
                        />
                      </p>
                    </div>
                  </div>

              
                  {unitOpen && (
                    <div className="unit_dropdown">
                      {units.map((u, i) => (
                        <div
                          key={i}
                          className="unit_item"
                          onClick={() => {
                            console.log(u.value);
                            setUnitOpen(false);
                          }}
                        >
                          {u.label}
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              )} */}

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

                <p className="mrp">₹{mrp}</p>
              </div>
            </div>

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

      {/* <div className="Product_Info_Card">
      <Link to={`/product-details/${encodeId(product?.id)}`}>
        <div className="prod_img_holder">
          <img src={imgSrc} className="prod_img" alt={productName} />

          <video
            className="prod_video"
            src={vdoSrc}
            muted
            loop
            playsInline
            autoPlay
          />
        </div>
      </Link>

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

      <div className="content_holder">
        <div className="middle_div">
          <Link to={`/product-details/${encodeId(product?.id)}`}>
            <p className="prod_name">{productName}</p>
          </Link>
          <div className="price_div">
            <p className="mrp_text">
              {symbol} {Number(mrp * rate).toFixed(2)}
            </p>
            <p className="s_price_text">
              {symbol} {Number(priceText * rate).toFixed(2)}
            </p>
          </div>
        </div>

        <div className="btn_holder">
          <Add_to_card_btn id={product?.id} product={product} />
        </div>
      </div>
    </div> */}
    </>
  );
};

export default Product_Info_Card;
