import React, { useState } from "react";
import "./Explore_Category_Card.css";
import { useRouter } from "next/navigation";
// import Alert_Modal from "../../../common_components/common_modal/alert_modal/Alert_Modal";

const Explore_Category_Card = (props) => {
  const navigate = useRouter();
  // const [showModal, setShowModal] = useState(false);
  const [modalShow, setModalShow] = React.useState(false);

  const handleCategoryClick = () => {
    if (props?.data?.eight_plus_status) {
      setModalShow(true);
    } else {
      // navigate.push("/shop");

      // navigate.push(
      //   `/product-listing/${props?.id}?category_name=${encodeURIComponent(
      //     props?.product
      //   )}&category_image=${encodeURIComponent(props?.img)}`
      // );
      navigate.push(`/shop?category_id=${props?.id}`);
    }
  };

  return (
    <section className="Explore_Category_Card">
      <div>
        <div className={`img_holder`} onClick={handleCategoryClick}>
          <img
            src={process.env.NEXT_PUBLIC_IMG_URL + props?.img}
            className="product_img"
          />
        </div>

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

        {/* <Alert_Modal
          data={props?.data}
          url={`/product-listing/${
            props?.id
          }?category_name=${encodeURIComponent(
            props?.product
          )}&category_image=${encodeURIComponent(props?.img)}`}
          show={modalShow}
          onHide={() => setModalShow(false)}
        /> */}
      </div>
    </section>
  );
};

export default Explore_Category_Card;
