import React from "react";
import "./Store_Product_Card.css";
import { encodeId } from "../../../../utils/common";
import { useRouter } from "next/navigation";

const Store_Product_Card = (props) => {
  const navigate = useRouter();

  return (
    <section
      className="Store_Product_Card"
      onClick={() => {
        navigate.push(`/product-details/${encodeId(props?.id)}`);
      }}
    >
      <div className="img_holder">
        <img
          src={process.env.NEXT_PUBLIC_IMG_URL + props?.img}
          className="prod_img"
        />

        {/* {props?.discount && ( */}
        {/* <div className="discount_div">
          <p className="discount_text">
            {`${(
              ((Number(props?.item?.Product_Variants[0]?.mrp) -
                Number(props?.item.Product_Variants[0]?.price)) /
                Number(props?.item.Product_Variants[0]?.mrp)) *
              100
            ).toFixed(0)}%`}{" "}
            Off
          </p>
        </div> */}
        {/* )} */}
      </div>

      <div className="text_div">
        <p className="prod_title">{props?.name}</p>
      </div>
    </section>
  );
};

export default Store_Product_Card;
