import React from "react";
import "./Home_Category_Card.css";
import { useRouter } from "next/navigation";

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

  const handleCategoryClick = () => {
    navigate.push(`/shop?category_id=${props?.id}`);
  };

  return (
    <section className="Explore_Category_Card" onClick={handleCategoryClick}>
      <div className="category_card_content">
        <div className="category_left_side">
          <h4 className="category_title">{props?.product}</h4>

          <p className="category_count">{props?.productCount || 0} Products</p>

          <button className="shop_now_btn">Shop Now</button>
        </div>

        <div className="category_right_side">
          <img
            src={process.env.NEXT_PUBLIC_IMG_URL + props?.img}
            alt={props?.product}
            className="category_image"
          />
        </div>
      </div>
    </section>
  );
};

export default Explore_Category_Card;
