"use client";
import { Scrollbar, A11y } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css/scrollbar";
import { GalleryCard } from "@/components/general";
import { GalleryBase } from "@/components/general/gallery/gallery-content";

type GallerySliderProps<T extends GalleryBase> = {
  data: T[];
};

const GallerySlider = <T extends GalleryBase>({ data }: GallerySliderProps<T>) => {
  return (
    <div className="pt-10 [&_.swiper-scrollbar]:static!">
      <Swiper
        modules={[Scrollbar, A11y]}
        spaceBetween={8}
        slidesPerView={1.1}
        pagination={{ clickable: true }}
        className="px-[5%]!"
        resistanceRatio={0}
        scrollbar={{ draggable: true }}
        breakpoints={{ 600: { slidesPerView: 2.1 } }}
      >
        {data.map((item, i) => (
          <SwiperSlide key={i} className="mb-5">
            <GalleryCard<T> item={item} key={i} />
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
};

export default GallerySlider;