"use client";
import React from "react";
import "./Explore_Category_Card.css";
import { useRouter } from "next/navigation";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPaw, faArrowRight } from "@fortawesome/free-solid-svg-icons";

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

  const handleCategoryClick = () => {
    if (props?.data?.eight_plus_status) {
      setModalShow(true);
    } else {
      // navigate.push(`/shop?category_id=${props?.id}`);
      navigate.push(props?.goto);
    }
  };

  return (
    <section className="Explore_Category_Card" onClick={handleCategoryClick}>
      <div className="category-card">
        {/* Image */}
        <div className="img_holder">
          <img
            src={process.env.NEXT_PUBLIC_IMG_URL + props?.img}
            className="product_img"
            alt={props?.product || "category"}
          />
        </div>

        <div className="text_holder">
          <p className="product_name">{props?.product}</p>

          <div className="shop_now">
            <span>Shop Now</span>
            <FontAwesomeIcon icon={faArrowRight} />
          </div>
        </div>
      </div>
    </section>
  );
};

export default Explore_Category_Card;
