import React, { useEffect } from "react";
import AOS from "aos";
import "aos/dist/aos.css";
import "animate.css/animate.compat.css";

import { Swiper, SwiperSlide } from "swiper/react";
import "./Demo_Product.css";

import { Link, useNavigate } from "react-router-dom";

import { Navigation, Pagination } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import Common_Category_Card from "../../common-components/common_category_card/Common_Category_Card";
import ScrollAnimation from "react-animate-on-scroll";

function Demo_ProductCategory({
  products,
  breakpoints,
  setSelectId,
  selectId,
}) {
  const navigate = useNavigate();

  useEffect(() => {
    AOS.init();
    AOS.refresh();
  }, []);

  AOS.init({ disable: "mobile" });

  const isMobile = window.innerWidth < 991;

  const [animate, setAnimate] = React.useState(false);

  useEffect(() => {
    if (isMobile) {
      setTimeout(() => setAnimate(true), 100);
    }
  }, []);

  return (
    <section className="Demo_Product_holder">
      <div className="container-fluid">
        <div className="category_swiper_holder">
          <div className="heading_holder">
            <h4 className="heading_text">Shop our top categories</h4>
          </div>

          {isMobile ? (
            // 📱 MOBILE VERSION (Animate on page load)
            <section
              className={`all_cats_section ${animate ? "fadeInLeft" : ""}`}
            >
              <div className="all_cats_div">
                <div className="row">
                  {products?.map((product) => (
                    <div className="col-lg-3 col-6" key={product.id}>
                      <div className="card_holder">
                        <Common_Category_Card
                          imgSrc={process.env.NEXT_PUBLIC_IMG_URL + product.image}
                          title={product.name}
                          onClick={() =>
                            navigate(`/categories?category_id=${product?.id}`)
                          }
                        />
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </section>
          ) : (

            <section className="all_cats_section">
              <div className="all_cats_div">
                <div className="row">
                  {products?.map((product) => (
                    <div className="col-lg-3 col-6" key={product.id}>
                      <div className="card_holder">
                        <Common_Category_Card
                          imgSrc={
                            process.env.NEXT_PUBLIC_IMG_URL + product.image
                          }
                          title={product.name}
                          onClick={() =>
                            navigate(`/categories?category_id=${product?.id}`)
                          }
                        />
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </section>

          )}

          
        </div>
      </div>
    </section>
  );
}

export default Demo_ProductCategory;
