import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react';
import style from '../styles/hero.module.css';
import 'swiper/css'
import Image from 'next/image';
import { useQuery } from 'react-query';
import { getBanner } from '~/services/banner';

const swiperBanner: SwiperProps = {
  autoplay: {
    delay: 6000,
    disableOnInteraction: false
  },
  // modules: [Pagination, Autoplay],
  loop: true,
  className: 'h-[400px] w-full',
  slidesPerView: 1.1,
  spaceBetween: 10
}

const Hero = () => {
  const bannerQuery = useQuery({
    queryKey: ['banner.all-promo'],
    queryFn: () => getBanner({ type: 'all-promo' })
  })

  const banners = bannerQuery.data || []

  return (
    <div className={style['wrapper']}>
      <div className={style['desc-section']}>
        <div className={style['title']}>Pasti Hemat & Untung Selama Belanja di Indoteknik.com!</div>
        <div className='h-4' />
        <div className={style['subtitle']}>Cari paket yang kami sediakan dengan penawaran harga & Nikmati kemudahan dalam setiap transaksi dengan fitur lengkap Pembayaran hingga barang sampai! </div>
      </div>

      <div className={style['banner-section']}>
        <Swiper {...swiperBanner}>
          {banners.map((banner, index) => (
            <SwiperSlide key={index}>
              <Image
                src='https://erp.indoteknik.com/api/image/x_banner.banner/x_banner_image/363'
                alt={banner.name}
                width={666}
                height={450}
                className='w-full h-full object-cover object-center rounded-2xl'
              />
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
    </div>
  )
}

export default Hero