"use client";

import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import { Pagination } from "swiper/modules";
import Image from "next/image";
import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";

interface BillboardImageSliderProps {
  images: string[];
}

const BillboardImageSlider: React.FC<BillboardImageSliderProps> = ({
  images,
}) => {
  return (
    <div className="my-8">
      <Swiper
        modules={[Pagination]}
        navigation
        spaceBetween={30}
        slidesPerView={1.3}
        centeredSlides={true}
        className="w-full max-w-lg overflow-visible"
      >
        {images.map((src, index) => (
          <SwiperSlide key={index} className="flex justify-center">
            <Image
              src={IMAGE_BASE_URL + src}
              alt={`Slide ${index + 1}`}
              width={400}
              height={400}
              className="rounded-xl object-cover"
            />
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
};

export default BillboardImageSlider;
