"use client";

import { useState } from "react";
import type { Swiper as SwiperType } from "swiper";
import { FreeMode } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/free-mode";
import ProductCard from "./ui/ProductCard";
import SectionHeader from "./ui/SectionHeader";
import CarouselNav from "./ui/CarouselNav";
import type { ProductCardData } from "@/lib/types";

export default function ProductCarousel({
  title,
  desc,
  href,
  products,
}: {
  title: string;
  desc?: string;
  href: string;
  products: ProductCardData[];
}) {
  const [swiper, setSwiper] = useState<SwiperType | null>(null);
  if (products.length === 0) return null;

  return (
    <section className="boxed mt-10">
      <SectionHeader title={title} desc={desc} href={href} nav={<CarouselNav swiper={swiper} />} />

      <div className="relative">
        <Swiper
          modules={[FreeMode]}
          dir="rtl"
          freeMode
          onSwiper={setSwiper}
          slidesPerView={2.2}
          spaceBetween={12}
          breakpoints={{
            480: { slidesPerView: 3.2 },
            768: { slidesPerView: 4.2 },
            1024: { slidesPerView: 6 },
          }}
        >
          {products.map((product) => (
            <SwiperSlide key={product.id} className="h-auto">
              <ProductCard product={product} />
            </SwiperSlide>
          ))}
        </Swiper>

        <div className="mt-4 flex justify-center lg:hidden">
          <CarouselNav swiper={swiper} />
        </div>
      </div>
    </section>
  );
}