import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay } from "swiper/modules";
import { ChevronLeft, ChevronRight } from "lucide-react";
import Link from "next/link";
import DefaultImage from "@/app/admin/_components/Defaultimage";

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

const Categories = ({ categories }: any) => {
  // console.log('Category', categories)
  return (
    <section className="categorycontainer py-10">
      <div className="container-xxl container px-3">
        <div className="-mx-3 flex flex-wrap">
          <div className="w-full px-3">
            <div className="section-heading mb-8 md:text-center">
              <h2 className="text-3xl font-bold">Categories</h2>
            </div>
          </div>
        </div>
        <div className="-mx-3 flex flex-wrap">
          <div className="relative w-full px-3">
            <Swiper
              modules={[Navigation, Autoplay]}
              loop={categories?.length > 4}
              speed={700}
              autoplay={{
                delay: 3000,
                disableOnInteraction: false,
              }}
              // autoplay={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,
                  spaceBetween: 5,
                },
                260: {
                  slidesPerView: 2,
                  spaceBetween: 5,
                },
                370: {
                  slidesPerView: 2,
                  spaceBetween: 10,
                },
                574: {
                  slidesPerView: 2,
                  spaceBetween: 12,
                },
                768: {
                  slidesPerView: 3,
                  spaceBetween: 15,
                },
                992: {
                  slidesPerView: 4,
                  spaceBetween: 15,
                },
                1200: {
                  slidesPerView: 5,
                  spaceBetween: 20,
                },
                1400: {
                  slidesPerView: 5,
                  spaceBetween: 30,
                },
                1700: {
                  slidesPerView: 5,
                  spaceBetween: 50,
                },
              }}
            >
              {categories.map((item: any, index: number) => (
                <SwiperSlide key={index}>
                  <div className="catbx">
                    <Link
                      href={`products?category=${item.slug}`}
                      className="catbximg block overflow-hidden rounded-lg"
                    >
                      {item.image ? (
                        <img
                          alt={item.title}
                          src={item.image}
                          className="w-full object-cover"
                        />
                      ) : (
                        <DefaultImage />
                      )}
                    </Link>

                    <div className="catbxheading mt-2 text-center">
                      <h3 className="text-lg font-semibold">
                        <Link href={`products?category=${item.slug}`}>
                          {item.name}
                        </Link>
                      </h3>
                    </div>
                  </div>
                </SwiperSlide>
              ))}
            </Swiper>
            {categories.length >= 5 && (
              <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;
