'use client';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Navigation, Pagination } from 'swiper/modules';
import Image from 'next/image';
import Link from 'next/link';
import { bannerData } from '@/data/banner';

const Slider = () => {
  const dataSlider = bannerData[0].header;

  return (
    <div className="banner-buildpc" style={{ marginBottom: '40px' }}>
      <Swiper
        modules={[Autoplay, Navigation, Pagination]}
        spaceBetween={12}
        slidesPerView={1}
        loop={true}
      >
        {dataSlider?.banner_buildpc?.map((banner, index) => (
          <SwiperSlide key={index}>
            <Link href={banner.desUrl} className="item-banner boder-radius-10">
              <Image
                src={banner.fileUrl}
                width={1909}
                height={57}
                alt={banner.title}
                priority={true}
                className="boder-radius-10"
              />
            </Link>
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
};

export default Slider;