'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';

// Định nghĩa kiểu dữ liệu cho mỗi Banner
interface BannerItem {
  id: number;
  link: string;
  imageSrc: string;
  altText: string;
}

// Dữ liệu mẫu (Bạn có thể fetch từ API)
const BANNER_DATA: BannerItem[] = [
  {
    id: 429,
    link: '/ad.php?id=429',
    imageSrc: 'https://nguyencongpc.vn/media/banner/01_Decc0f3e158e61fabaf09a74d48e1c357bd.webp',
    altText: 'banner 1',
  },
  {
    id: 392,
    link: '/ad.php?id=392',
    imageSrc: 'https://nguyencongpc.vn/media/banner/01_Dec383fdcbc6361363bd6d14f05d2c88ee2.webp',
    altText: 'banner 2',
  },
];

const HeaderSlider: React.FC = () => {
  return (
    <div className="header-top">
      <Swiper
        modules={[Autoplay, Navigation, Pagination]}
        spaceBetween={12}
        slidesPerView={1}
        loop={true}
        className="mySwiper"
      >
        {BANNER_DATA.map((banner) => (
          <SwiperSlide key={banner.id}>
            <div className="item">
              <Link href={banner.link} className="item-banner boder-radius-10">
                <Image
                  src={banner.imageSrc}
                  width={1909}
                  height={57}
                  alt={banner.altText}
                  priority={true}
                  className="h-auto w-full object-cover"
                />
              </Link>
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
};

export default HeaderSlider;