"use client";

import { useEffect, useRef } from "react";
import Swiper from "swiper";
import { Navigation, Autoplay } from "swiper/modules";
import "swiper/css";
import Link from "next/link";
type Occasion = {
  _id: string;
  name: string;
  slug: string;
  image: string;
};

const ShopTheOccasion = ({ occasions }: { occasions: Occasion[] }) => {
  const swiperRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!swiperRef.current) return;
    const swiper = new Swiper(swiperRef.current, {
      modules: [Navigation, Autoplay],
      loop: true,
      autoplay: { delay: 3000, disableOnInteraction: 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 },
      },
    });
    return () => swiper.destroy(true, true);
  }, [occasions]);

  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">
            <div ref={swiperRef} className="swiper" id="ShopCarousel">
              <div className="swiper-wrapper">
                {occasions.map((occasion) => (
                  <div className="swiper-slide" key={occasion._id}>
                    <Link href={`/products?category=${occasion.slug}`} className="shopbx">
                      <img
                        src={occasion.image}
                        alt={occasion.name}
                        style={{ width: "100%", height: "420px", objectFit: "cover", display: "block" }}
                      />
                      <div className="shopovarlay">
                        <h3>{occasion.name}</h3>
                      </div>
                    </Link>
                  </div>
                ))}
              </div>
            </div>

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