import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
// import { Navigation, Pagination, Mousewheel, Keyboard } from 'swiper/modules';

const TopImageSwiper = () => {
  // ✅ 直接在这里放你的图片数组，想加多少加多少
  const images = [
    'https://cdn.asteriahair.com/uploads/202607/01/20260701165056_761989a0fdc11d5e.jpg',
    'https://cdn.asteriahair.com/uploads/202607/01/20260701165110_3fff435adf276b89.jpg',
    'https://cdn.asteriahair.com/uploads/202607/01/20260701165123_c424f6f1d0b29522.jpg',
    'https://cdn.asteriahair.com/uploads/202607/01/20260701165056_761989a0fdc11d5e.jpg',
  ];

  return (
    <div className="w-full max-w-[1200px] mx-auto ">
      <Swiper
        slidesPerView={1}
        spaceBetween={0}
        loop={true} // 无限轮播
      
        // pagination={{ clickable: true }}
        // mousewheel
        // keyboard={{ enabled: true }}
        className="h-auto md:h-[80vh]  overflow-hidden"
      >
        {/* ✅ 自动遍历图片数组，一行代码搞定所有图片 */}
        {images.map((img, index) => (
          <SwiperSlide key={index}>
            <img
              src={img}
              alt={`slide-${index}`}
              className="w-full h-full object-cover"
            />
          </SwiperSlide>
        ))}
        
      </Swiper>
    </div>
  );
};

export default TopImageSwiper;