nshop-front-m/src/app/(public)/_components/MiddleImageSwiper.tsx

import { Swiper, SwiperSlide } from "swiper/react";
import {  Pagination  } from "swiper/modules";
import Link from "next/link";
import Image from "next/image";
import { OpenAddToCartModalButton } from "@/components/common/AddToCartModal/OpenAddToCartModalButton";
import type {HomeProduct,HomeSectionImage} from "@/types/home/type"
interface zeroWearProps {
  zeroWear: HomeProduct[];
  zeroWearImage:HomeSectionImage[]
}
// const productList = [
//   {
//     id: 1,
//     img: "https://picsum.photos/400/500?random=1",
//     title: "14-36 In Water Wave Hum...",
//     price: 143.35,
//   },
//   {
//     id: 2,
//     img: "https://picsum.photos/400/500?random=2",
//     title: "14-36 In Water Wave Hum.",
//     price: 143.35,
//   },
//   {
//     id: 3,
//     img: "https://picsum.photos/400/500?random=3",
//     title: "14-36 In Water Wave Hum...",
//     price: 143.35,
//   },
//   {
//     id: 4,
//     img: "https://picsum.photos/400/500?random=4",
//     title: "14-36 In Water Wave Hum.",
//     price: 143.35,
//   },
// ];

const MiddleImageSwiper = ({ zeroWear,zeroWearImage }: zeroWearProps) => {
  if (!zeroWear || zeroWear.length === 0) return null;
  const  productList = zeroWear
  const WearImage = zeroWearImage;
  return (
    <div className="w-full pr-4 pl-4 mx-auto  rounded-lg  ">
      <div className="w-full">
        <img
          src={WearImage[0].image || 'https://cdn.asteriahair.com/uploads/202602/11/20260211095330_7ec9031a4ab36e44.gif'}
          alt={WearImage[0].title || 'ZEROWEAR hair banner'}
          className="w-full h-auto object-cover block"
        />
      </div>
      <div className="py-4 px-4 pb-6 relative min-h-83 bg-[#f0f5f3] pb-10">
        <div className="w-full relative">
          <Swiper
            modules={[Pagination]}
            spaceBetween={16}
            slidesPerView={2}
            pagination={{
              type: "progressbar",
              el: ".my-progress-bar",
            }}
            className="mySwiper middle-image-swiper"
            breakpoints={{
              480: { slidesPerView: 1 },
              768: { slidesPerView: 2 },
            }}
          >
            {productList.map((item) => (
              <SwiperSlide key={item.id}>
                <div className="bg-white rounded overflow-hidden  flex flex-col">
                  <Link  href={`/products/${item.urlKey}_${item.id}.html`} className="relative  aspect-[3/4] w-full overflow-hidden rounded-sm block">
                    <Image
                      src={item.image_url}
                      alt={item.name}
                      fill

                      className="object-cover"
                    />
                  </Link>
                  <div className="p-2 flex flex-col gap-2">
                    <Link href={`/products/${item.urlKey}_${item.id}.html`} className="text-sm text-gray-800 truncate">
                      {item.name}
                    </Link>
                    {/* 价格 + 购物车图标 */}
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-1">
                        <span className="font-semibold">${item.min_price}</span>
                        <span className="text-xs text-gray-500 line-through">
                          ${item.price}
                        </span>
                      </div>
                      {/* 购物车图标 */}
                      <OpenAddToCartModalButton
                         productId={item.id}
                      />
                    </div>
                
                  </div>
                </div>
              </SwiperSlide>
            ))}
          </Swiper>
          <div className="my-progress-bar mt-5 w-full h-1 bg-gray-200 rounded-full bottom-0 [top:unset]"></div>
        </div>
      </div>
    </div>
  );
};

export default MiddleImageSwiper;