import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay } from "swiper/modules";
import { ChevronLeft, ChevronRight } from "lucide-react";

import "swiper/css";
import "swiper/css/navigation";

const Categories = ({ categories }: any) => {
  return (
    <section className="categorycontainer py-10">
      <div className="container container-xxl px-3">
        <div className="flex flex-wrap -mx-3">
          <div className="w-full px-3">
            <div className="section-heading md:text-center mb-8">
              <h2 className="text-3xl font-bold">
                Categories
              </h2>
            </div>
          </div>
        </div>
        <div className="flex flex-wrap -mx-3">
          <div className="px-3 w-full relative">
            <Swiper
              modules={[Navigation, Autoplay]}
              autoplay={false}
              speed={700}
              loop={false}
              spaceBetween={15}
              slidesPerView={1}
              navigation={{
                nextEl: ".swiper-button-next-categories-carousel",
                prevEl: ".swiper-button-prev-categories-carousel",
              }}
              pagination={{
                el: ".swiper-pagination-categories-carousel",
                clickable: true,
                type: "progressbar",
              }}
              breakpoints={{
                100: {
                  slidesPerView: 1.2,
                  spaceBetween: 5,
                },
                260: {
                  slidesPerView: 1.6,
                  spaceBetween: 5,
                },
                370: {
                  slidesPerView: 2.2,
                  spaceBetween: 10,
                },
                574: {
                  slidesPerView: 2.2,
                  spaceBetween: 12,
                },
                768: {
                  slidesPerView: 3,
                  spaceBetween: 15,
                },
                992: {
                  slidesPerView: 4,
                  spaceBetween: 15,
                },
                1200: {
                  slidesPerView: 5,
                  spaceBetween: 20,
                },
                1400: {
                  slidesPerView: 5,
                  spaceBetween: 20,
                },
                1700: {
                  slidesPerView: 5,
                  spaceBetween: 20,
                },
              }}
            >
              {categories.map((item: any, index: number) => (
                <SwiperSlide key={index}>
                  <div className="catbx">
                    <a className="catbximg block overflow-hidden rounded-lg">
                      <img
                        alt={item.title}
                        src={item.image}
                        className="w-full object-cover"
                      />
                    </a>

                    <div className="catbxheading text-center mt-4">
                      <h3 className="text-lg font-semibold">
                        <a href="#">
                          {item.title}
                        </a>
                      </h3>
                    </div>
                  </div>
                </SwiperSlide>
              ))}
            </Swiper>

            

            <div className="swiper-nav">
              <div className="swiper-button-prev swiper-button-prev-categories-carousel"></div>
              <div className="swiper-button-next swiper-button-next-categories-carousel"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Categories;