'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 (
    <>
      <Swiper
        className="box-banner-homepage relative"
        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>
      <Swiper
        className="box-banner-under-slider"
        modules={[Autoplay, Navigation, Pagination]}
        spaceBetween={12}
        slidesPerView={2}
        loop={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>
    </>
  );
};

export default SliderHome;