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

import { Swiper, SwiperSlide } from "swiper/react";
// import {  Pagination  } from "swiper/modules";
import { OpenAddToCartModalButton } from "@/components/common/AddToCartModal/OpenAddToCartModalButton";
import type {HomeProduct,HomeSectionImage} from "@/types/home/type"
import Link from "next/link";
import Image from "next/image";
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) => {
  // zeroWear=[
  //                   {
  //                       "id": 55766,
  //                       "sku": "STW--4*7BobWig--RTG-10, #4--STW--5*5BobWig--12",
  //                       "name": "[Pack Deal] 10in Natural Black 7*4 Bob Wig and 12in Chocolate Brown 5*5 Bob Wig",
  //                       "slug": null,
  //                       "type": "flexible_variant",
  //                       "price": '368',
  //                       "min_price":'368' ,
  //                       "special_price": null,
  //                       "image_url": "https://img.asteriahair.com/media/catalog/product/2/_/2_wigs_package_deal_natural_black_bob_wig_and_natural_black_bob_wig_1.jpg",
  //                       "is_new": false,
  //                       "is_featured": false,
  //                       "short_description": "Asteria Hair [Pack Deal] 10in Natural Black Ready To Go 7*4 Lace Bob Wig and 12in Chocolate Brown 5*5 Lace Closure Bob Wig.",
  //                       "rating": 5,
  //                       "review_count": 2
  //                   },
  //                   {
  //                       "id": 55811,
  //                       "sku": "LD--13*4Wig--24,LB--5*7Wig--RTG--20",
  //                       "name": "[Pack Deal] 2 Long Length Wig 24Inch Loose Deep 13*4 Lace Wig and 20Inch Body Wave Ready To Go Closure Wig",
  //                       "slug": null,
  //                       "type": "flexible_variant",
  //                       "price": "830",
  //                       "min_price": "830",
  //                       "special_price": null,
  //                       "image_url": "https://img.asteriahair.com/media/catalog/product/l/d/ld_body.png",
  //                       "is_new": false,
  //                       "is_featured": false,
  //                       "short_description": "Asteria Hair [Pack Deal] 2 Long Length Wig 24Inch Loose Deep 13*4 Lace Wig and 20Inch Body Wave Ready To Go 5*7 Closure Wig.",
  //                       "rating": 5,
  //                       "review_count": 13
  //                   },
  //                   {
  //                       "id": 55651,
  //                       "sku": "STW--4*7Wig--RTG--16,A025--STW--13*4Bob--RTG--12",
  //                       "name": "[Pack Deal] 2 Ready To Go Wig 100% Glueless Straight Texture",
  //                       "slug": null,
  //                       "type": "flexible_variant",
  //                       "price": "400",
  //                       "min_price": "400",
  //                       "special_price": null,
  //                       "image_url": "https://img.asteriahair.com/media/catalog/product/b/o/bob_.png",
  //                       "is_new": false,
  //                       "is_featured": false,
  //                       "short_description": "Asteria Hair [Pack Deal] 2 Ready To Go Wig 100% Glueless Straight Texture, straight 7*5 ready to go lace wig 16inch and zigzag style 13*4 ready to go lace bob wig 12inch.",
  //                       "rating": 5,
  //                       "review_count": 11
  //                   },
  //                   {
  //                       "id": 55681,
  //                       "sku": "Curly--HDLaceFrontWig--20--250%,LB--4*7BobWig--RTG-10",
  //                       "name": "[Pack Deal] 20in 250% Density Curly 13*4 HD Lace Wig and 10Inch 7*4 Ready To Go Body Wave Bob Human Hair Wig",
  //                       "slug": null,
  //                       "type": "flexible_variant",
  //                       "price": "650",
  //                       "min_price": "650",
  //                       "special_price": null,
  //                       "image_url": "https://img.asteriahair.com/media/catalog/product/j/c/jc_rtg_lb_.png",
  //                       "is_new": false,
  //                       "is_featured": false,
  //                       "short_description": "Asteria Hair [Pack Deal] 20in 250% Density Curly 13*4 HD Lace Wig and 10in 7*4 Ready To Go Body Wave Bob Human Hair Lace Wig.",
  //                       "rating": 5,
  //                       "review_count": 4
  //                   },
  //                   {
  //                       "id": 55982,
  //                       "sku": "JC-5*7Wig-24-180%-RTG,NHC-RTG-LB-4*7BOB-12",
  //                       "name": "[Pack Deal]2 Ready To Go Wigs Curly 5*7 Lace Wig 24 Inch And BOB Body Wave Wig 4*7 Lace Wigs 12 Inch",
  //                       "slug": null,
  //                       "type": "flexible_variant",
  //                       "price": '738',
  //                       "min_price": '738',
  //                       "special_price": null,
  //                       "image_url": "https://img.asteriahair.com/media/catalog/product/1/_/1_6_16.png",
  //                       "is_new": false,
  //                       "is_featured": false,
  //                       "short_description": "This value pack includes two ready-to-wear wigs: a 24-inch curly style with 5*7 lace front and a 12-inch body wave bob with 4*7 lace, both made from human hair for instant perfection and versatile styling.",
  //                       "rating": 0,
  //                       "review_count": 0
  //                   },
  //                   {
  //                       "id": 55984,
  //                       "sku": "NHC-RTG-LB-4*7BOB-12,NHC-RTG-STW-4*7BOB-10",
  //                       "name": "[Pack Deal]Ready To Go Wigs Bob Straight Wig 4*7 Lace Wigs 10 Inch And BOB Body Wave Wig 4*7 Lace Wigs 12 Inch",
  //                       "slug": null,
  //                       "type": "flexible_variant",
  //                       "price": '398',
  //                       "min_price": '398',
  //                       "special_price": null,
  //                       "image_url": "https://img.asteriahair.com/media/catalog/product/1/_/1_7.png",
  //                       "is_new": false,
  //                       "is_featured": false,
  //                       "short_description": "This value pack includes two ready-to-wear bob wigs: a 10-inch straight style and a 12-inch body wave style, both featuring a 4*7 lace construction and made from human hair, allowing you to effortlessly switch between two fashionable looks.",
  //                       "rating": 0,
  //                       "review_count": 0
  //                   }
  //               ]
  if (!zeroWear || zeroWear.length === 0) return null;
  const  productList = zeroWear
  const WearImage = zeroWearImage;
  const bgImage = WearImage?.[0]?.image;
  console.log(WearImage);
  
  return (
    <div className={`w-full px-12 mx-auto   `}     
   >
      <div className="w-full flex  rounded-lg   bg-no-repeat bg-size-[100%_100%]  " 
         style={{
      backgroundImage: bgImage
        ? `url(${bgImage})`
        : undefined,
    }}
      >
      <div className="w-[777px] h-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 pl-0 relative max-w-[1080px] ">
        <div className="w-full relative">
          <Swiper
            // modules={[Pagination]}
            spaceBetween={16}
            slidesPerView={3.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">
                  {/* <img
                    src={item.image_url}
                    alt={item.name}
                    className="w-full aspect-[3/4] object-cover"
                  /> */}
                  <Link  href={`/${item.urlKey}.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={`/${item.urlKey}.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}
                        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>
    </div>
  );
};

export default MiddleImageSwiper;