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

import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination } from "swiper/modules";
import { OpenAddToCartModalButton } from "@/components/common/AddToCartModal/OpenAddToCartModalButton";
// 导入Swiper基础样式
import "swiper/css";
import "swiper/css/navigation";
import {HomeProduct} from "@/types/home/type"
interface HomeBestSellersProps {
  bestSellers: HomeProduct[];
}
const HomeBestSellers = ({ bestSellers }: HomeBestSellersProps) => {
    if (!bestSellers || bestSellers.length === 0) return null;
      // 4. 真实数据按每6个拆分一组，替换原来的模拟拆分逻辑
  const chunkSize = 6;
  const productBlocks:  HomeProduct[][] = [];
  for (let i = 0; i < bestSellers.length; i += chunkSize) {
    productBlocks.push(bestSellers.slice(i, i + chunkSize));
  }
  return (
    <div className="w-full max-w-[1200px] mx-auto px-4 py-8">
      {/* 标题 */}
      <h2 className="text-2xl font-bold mb-6">Best Sellers</h2>

      {/* Swiper容器 */}
      <Swiper
        slidesPerView={1}
        spaceBetween={20}
        modules={[Navigation, Pagination]}
        pagination={{
          el: ".custom-pagination",
          clickable: true,
          renderBullet: (index, className) => {
            // 所有分页默认底色为 #E5E5E5
            return `<span class="${className} w-6 h-[5px] rounded-full mx-1 bg-[#E5E5E5]"></span>`;
          },
          // 激活时强制覆盖底色，加 !important 提高权重
          bulletActiveClass: "!bg-[#333]",
        }}
        className="relative"
      >
        {/* 渲染2个滑动块 */}
        {productBlocks.map((block, blockIndex) => (
          <SwiperSlide key={blockIndex} className="!px-0">
            {/* 每个块：6个产品，2列布局 */}
            <div className="grid grid-cols-2 gap-4">
              {block.map((product) => (
                <div key={product.id} className="flex flex-col gap-2">
                  {/* 产品图片 */}
                  <img
                    src={product.image_url}
                    alt={product.name}
                    className="w-full h-auto object-cover rounded-sm"
                  />
                  {/* 产品标题 */}
                  <p className="text-sm text-gray-800 truncate">
                    {product.name}
                  </p>
                  {/* 评分 + 评论数 */}
                  <div className="flex items-center gap-1">
                    <div className="flex">
                      {/* 星级图标（简化版，可替换为真实星星图标） */}
                      {[1, 2, 3, 4, 5].map((star) => (
                        <svg
                          key={star}
                          className="w-4 h-4 text-yellow-400"
                          fill="currentColor"
                          viewBox="0 0 20 20"
                        >
                          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                        </svg>
                      ))}
                    </div>
                    <span className="text-xs text-gray-600">
                      { product.review_count}
                    </span>
                  </div>
                  {/* 价格 + 购物车图标 */}
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-1">
                      <span className="font-semibold">${product.min_price}</span>
                      <span className="text-xs text-gray-500 line-through">
                        ${product.price}
                      </span>
                    </div>
                    {/* 购物车图标 */}
                    <OpenAddToCartModalButton
                      productUrlKey={
                        "http://nshop.test/hd-transparent-deep-wave-&-curly-lace-frontal-closure-wig"
                      }
                      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>
        ))}

        {/* 自定义分页器容器（底部小按钮） */}
        <div className="custom-pagination flex justify-center mt-4"></div>
      </Swiper>
    </div>
  );
};

export default HomeBestSellers;