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

import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import {  Pagination  } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import "./css/swiper-custom.css";
import { OpenAddToCartModalButton } from "@/components/common/AddToCartModal/OpenAddToCartModalButton";
import {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"
            breakpoints={{
              480: { slidesPerView: 1 },
              768: { slidesPerView: 2 },
            }}
          >
            {productList.map((item) => (
              <SwiperSlide key={item.id}>
                <div className="bg-white rounded overflow-hidden  flex flex-col">
                  <img
                    src={item.image_url}
                    alt={item.name}
                    className="w-full aspect-[3/4] object-cover"
                  />

                  <div className="p-2 flex flex-col gap-2">
                    <p className="text-sm text-gray-800 truncate">
                      {item.name}
                    </p>
                    {/* 价格 + 购物车图标 */}
                    <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}
                        icon={
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="32"
                            height="32"
                            viewBox="0 0 32 32"
                            fill="none"
                          >
                            <rect
                              x="0"
                              y="0"
                              width="32"
                              height="32"
                              rx="8"
                              fill="#036141"
                            ></rect>
                            <path
                              stroke="rgba(255, 255, 255, 1)"
                              stroke-width="1.3333333333333333"
                              stroke-linejoin="round"
                              stroke-linecap="round"
                              d="M6.40039 7.79993L8.03372 7.79993L8.73372 10.5999M8.73372 10.5999L11.0671 19.9333L23.2004 19.9333L25.5337 10.5999L8.73372 10.5999Z"
                            ></path>
                            <ellipse
                              cx="11.066040515899658"
                              cy="23.199928283691406"
                              rx="1.4000248908996582"
                              ry="1.4000015258789062"
                              stroke="rgba(255, 255, 255, 1)"
                              stroke-width="1.3333333333333333"
                              stroke-linejoin="round"
                              stroke-linecap="round"
                            ></ellipse>
                            <ellipse
                              cx="23.1998291015625"
                              cy="23.199928283691406"
                              rx="1.4000244140625"
                              ry="1.4000015258789062"
                              stroke="rgba(255, 255, 255, 1)"
                              stroke-width="1.3333333333333333"
                              stroke-linejoin="round"
                              stroke-linecap="round"
                            ></ellipse>
                            <path
                              stroke="rgba(255, 255, 255, 1)"
                              stroke-width="1.3333333333333333"
                              stroke-linejoin="round"
                              stroke-linecap="round"
                              d="M15.2656 15.2665L18.999 15.2665"
                            ></path>
                            <path
                              stroke="rgba(255, 255, 255, 1)"
                              stroke-width="1.3333333333333333"
                              stroke-linejoin="round"
                              stroke-linecap="round"
                              d="M17.1348 17.1332L17.1348 13.3999"
                            ></path>
                          </svg>
                        }
                      />
                    </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;