"use client";

import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay } from "swiper/modules";

import "swiper/css";
import "swiper/css/navigation";
import Link from "next/link";
import DefaultImage from "@/app/admin/_components/Defaultimage";

type Occasion = {
  _id: string;
  name: string;
  slug: string;
  image: string;
};

const ShopTheOccasion = ({ occasions }: { occasions: Occasion[] }) => {
  if (!occasions?.length) return null;

  return (
    <section className="shopcontainer !pb-2">
      <div className="container-xxl container px-3">
        <div className="-mx-3 flex flex-wrap">
          <div className="w-full px-3">
            <div className="section-heading md:text-center">
              <h2>Shop the Occasion</h2>
            </div>
          </div>
        </div>

        <div className="-mx-3 flex flex-wrap">
          <div className="relative w-full px-3">
            <Swiper
              key={occasions.length}
              modules={[Navigation, Autoplay]}
              loop={occasions?.length > 4}
              speed={700}
              autoplay={{
                delay: 3000,
                disableOnInteraction: false,
              }}
              spaceBetween={20}
              slidesPerView={1}
              navigation={{
                nextEl: ".swiper-button-next-shop-carousel",
                prevEl: ".swiper-button-prev-shop-carousel",
              }}
              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: 4,
                  spaceBetween: 20,
                },
                1400: {
                  slidesPerView: 4,
                  spaceBetween: 20,
                },
                1700: {
                  slidesPerView: 4,
                  spaceBetween: 20,
                },
              }}
            >
              {occasions.map((occasion) => (
                <SwiperSlide key={occasion._id}>
                  <Link
                    href={`/products?category=${occasion.slug}`}
                    className="shopbx"
                  >
                    {occasion.image ? (
                      <img src={occasion.image} alt={occasion.name} />
                    ) : (
                      <DefaultImage />
                    )}

                    <div className="shopovarlay">
                      <h3>{occasion.name}</h3>
                    </div>
                  </Link>
                </SwiperSlide>
              ))}
            </Swiper>
            {occasions.length >= 5 && (
              <div className="swiper-nav !mt-0">
                <div className="swiper-button-prev swiper-button-prev-shop-carousel"></div>
                <div className="swiper-button-next swiper-button-next-shop-carousel"></div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

export default ShopTheOccasion;
// import { Navigation, Autoplay } from "swiper/modules";
// import Link from "next/link";

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

// type Occasion = {
//   _id: string;
//   name: string;
//   slug: string;
//   image: string;
// };

// const ShopTheOccasion = ({ occasions }: { occasions: Occasion[] }) => {
//   if (!occasions?.length) return null;
//   console.log('Occasion', occasions)
//   return (
//     <section className="shopcontainer">
//       <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">
//               <h2>Shop the Occasion</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,
//                               },
//                             }}
//             >
//               {occasions.map((occasion) => (
//                 <SwiperSlide key={occasion._id}>
//                   <Link href={`/products?category=${occasion.slug}`} className="shopbx">
//                     <img
//                       src={occasion.image}
//                       alt={occasion.name}
//                       className="w-full h-[420px] object-cover"
//                     />
//                     <div className="shopovarlay">
//                       <h3>{occasion.name}</h3>
//                     </div>
//                   </Link>
//                 </SwiperSlide>
//               ))}
//             </Swiper>

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

// export default ShopTheOccasion;
