import React from "react";
import "./Sheared_Product_card.css";
import { faEye, faHeart } from "@fortawesome/free-regular-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Link } from "react-router-dom";

function Sheared_Product_card({ imgSrc, productName,category }) {
  return (
    <>
      <Link to={`/categories?category_id=${category?.id}`}>

        <section className="Sheared_Product_card">
          <div className="img_content_holder">
            <div className="img_holder">
              <img
                className="Product_img"
                src={process.env.NEXT_PUBLIC_IMG_URL + imgSrc}
                alt={"Product_img"}
              />
            </div>

            <div className="icon_holder">
              {/* <FontAwesomeIcon className="feature_icon" icon={faHeart} /> */}
              <FontAwesomeIcon className="feature_icon" icon={faEye} />
            </div>

            <div className="overlay_holder"></div>
          </div>
          <div className="text_holder">
            <p>{productName}</p>
          </div>
        </section>
      </Link>
    </>
  );
}

export default Sheared_Product_card;
