"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";

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

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

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