'use client';
import React from 'react';
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 './bannerData';

const SliderHome: React.FC = () => {
  // data banner slider
  const dataSlider = bannerData[0].homepage;

  return (
    <>
      <div className="box-banner-homepage relative">
        <Swiper
          modules={[Autoplay, Navigation, Pagination]}
          spaceBetween={12}
          slidesPerView={1}
          loop={true}
        >
          {dataSlider?.banner_slider_homepage_main?.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>
      <div className="box-banner-under-slider">
        <Swiper
          modules={[Autoplay, Navigation, Pagination]}
          spaceBetween={12}
          slidesPerView={2}
          loop={true}
          navigation={true}
        >
          {dataSlider?.banner_under_slider_trangchu?.map((banner, index) => (
            <SwiperSlide key={index} className="item">
              <Link href={banner.desUrl} className="item-banner boder-radius-10">
                <Image
                  src={banner.fileUrl}
                  width={banner.width}
                  height={banner.height}
                  alt={banner.title}
                  className="lazy boder-radius-10"
                />
              </Link>
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
    </>
  );
};

export default SliderHome;