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">20% Off</p>
        </div>
        {/* )} */}
      </div>

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

export default Store_Product_Card;
