"use client";
// import { useState } from "react";
// import { Swiper, SwiperSlide } from "swiper/react";
// import { Navigation } from "swiper/modules";
import Image from "next/image";
import type { HomeSectionImage } from "@/types/home/type";
import Link from "next/link";
interface middleBannerProps {
  middleBanner: HomeSectionImage[];
}
export default function HomeMiddleBanner({ middleBanner }: middleBannerProps) {
  // const [activeIndex, setActiveIndex] = useState(0);

  // const [swiperRef] = useState(null);
  if (!middleBanner || middleBanner.length === 0) return null;
  const middleBannerImages = middleBanner;

  // const handleSlideChange = (swiper: any) => {
  //   setActiveIndex(swiper.activeIndex);
  // };

  // const handleIndicatorClick = (index: any) => {
  //   if (swiperRef) {
  //     setActiveIndex(index);
  //   }
  // };

  return (
    <div className="w-full  mx-auto px-12 flex items-center justify-center gap-11 ">
      {/* <Swiper
        modules={[Navigation]}
        spaceBetween={10}
        slidesPerView={1}
        onSlideChange={handleSlideChange}
        className="mb-6"
      > */}
      {middleBannerImages.map((item, idx) => (
        // <SwiperSlide key={idx}>
        <Link
          key={idx}
          href={item.link}
          className="block w-full"
          aria-label={item.title}
        >
          <Image
            src={item.image}
            alt={item.title}
            width={1408}
            height={692}
            sizes="100vw"
            className="w-full h-auto rounded-md object-cover"
          />
        </Link>
        //  {/* </SwiperSlide> */}
      ))}
      {/* </Swiper> */}
      {/* <div className="flex justify-center gap-2">
        <button
          onClick={() => handleIndicatorClick(0)}
          className={`w-6 h-[5px] rounded-full  opacity-100 ${
            activeIndex === 0 ? "bg-[#333]" : "bg-[#E5E5E5]"
          }`}
          aria-label="切换到第一块"
        />
        <button
          onClick={() => handleIndicatorClick(1)}
          className={`w-6 h-[5px] rounded-full  opacity-100 ${
            activeIndex === 1 ? "bg-[#333]" : "bg-[#E5E5E5]"
          }`}
          aria-label="切换到第二块"
        />
      </div> */}
    </div>
  );
}