import ImageSkeleton from '@/core/components/elements/Skeleton/ImageSkeleton'
import useHeroBanner from '../hooks/useHeroBanner'
import Image from '@/core/components/elements/Image/Image'
import MobileView from '@/core/components/views/MobileView'

// 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 (
    <MobileView>
      <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>
    </MobileView>
  )
}

export default HeroBanner