


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

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

  let metal, size, triple;
  const item = props?.item;

  if (Number(item?.variant_type_id) === Number(variant_type.Single)) {
    metal = item?.Product_Variants?.[0];
  } else if (Number(item?.variant_type_id) === Number(variant_type.Double)) {
    metal = item?.Product_Variants?.[0];
    size = metal?.Double_Variants?.[0];
  } else if (Number(item?.variant_type_id) === Number(variant_type.Triple)) {
    metal = item?.Product_Variants?.[0];
    size = metal?.Double_Variants?.[0];
    triple = size?.Triple_Variants?.[0];
  }

  const activeVariant = triple || size || metal;

  const mrp = Number(activeVariant?.mrp);
  const price = Number(activeVariant?.price);

  const discount = mrp && price ? Math.round(((mrp - price) / mrp) * 100) : 0;

  return (
    <section
      className="Store_Product_Card"
      onClick={() => {
        navigate.push(`/product-details/${encodeId(props?.id)}`);
      }}
    >
      <div className="product-image-wrapper">
        {/* Discount */}
        {discount > 0 && <div className="discount_badge">{discount}% OFF</div>}

        {/* Product Image */}
        <img
          src={process.env.NEXT_PUBLIC_IMG_URL + props?.img}
          className="prod_img"
          alt={props?.name || "Product"}
        />
      </div>

      {/* Product Name */}
      <div className="product-name-wrapper">
        <p className="prod_title">{props?.name}</p>
      </div>
    </section>
  );
};

export default Store_Product_Card;