import ImageSkeleton from "@/core/components/elements/Skeleton/ImageSkeleton"
import useHeroBanner from "../hooks/useHeroBanner"
import Image from "@/core/components/elements/Image/Image"

// Swiper
import { Swiper, SwiperSlide } from "swiper/react"
import { Pagination, Autoplay } from "swiper"
import "swiper/css"
import "swiper/css/pagination"
import "swiper/css/autoplay"

const swiperBanner = {
  pagination: { dynamicBullets: true },
  autoplay: {
    delay: 6000,
    disableOnInteraction: false
  },
  modules: [Pagination, Autoplay]
}

const HeroBanner = () => {
  const { heroBanners } = useHeroBanner()
  
  return (
    <div className="min-h-[200px]">
      { heroBanners.isLoading && <ImageSkeleton /> }
      { !heroBanners.isLoading && (
        <Swiper
          slidesPerView={1}
          pagination={swiperBanner.pagination} 
          modules={swiperBanner.modules}
          autoplay={swiperBanner.autoplay}
          className="border-b border-gray_r-6"
        >
          { heroBanners.data?.map((banner, index) => (
            <SwiperSlide key={index}>
              <Image 
                src={banner.image}
                alt={banner.name}
                className="w-full h-auto"
              />
            </SwiperSlide>
          )) }
        </Swiper>
      ) }
    </div>
  )
}

export default HeroBanner