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'
import MobileView from '@/core/components/views/MobileView'
import DesktopView from '@/core/components/views/DesktopView'
import Link from '@/core/components/elements/Link/Link'

const HeroBanner = () => {
  const { heroBanners } = useHeroBanner()

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

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

  return (
    <div className='min-h-[200px]'>
      {heroBanners.isLoading && <ImageSkeleton />}
      {!heroBanners.isLoading && (
        <>
          <MobileView>
            <Swiper slidesPerView={1} className='border border-gray_r-6' {...swiperBannerMobile}>
              {heroBanners.data?.map((banner, index) => (
                <SwiperSlide key={index}>
                  <Link href={banner.url || ''} className='w-full h-auto'>
                    <Image src={banner.image} alt={banner.name} className='w-full h-auto' />
                  </Link>
                </SwiperSlide>
              ))}
            </Swiper>
          </MobileView>
          <DesktopView>
            <Swiper slidesPerView={1} className='border border-gray_r-6' {...swiperBannerDesktop}>
              {heroBanners.data?.map((banner, index) => (
                <SwiperSlide key={index}>
                  <Link href={banner.url || ''} className='w-full h-auto'>
                    <Image src={banner.image} alt={banner.name} className='w-full h-auto' />
                  </Link>
                </SwiperSlide>
              ))}
            </Swiper>
          </DesktopView>
        </>
      )}
    </div>
  )
}

export default HeroBanner