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

// import { Swiper, SwiperSlide } from "swiper/react";
// import { Navigation, Pagination } from "swiper/modules";
import { OpenAddToCartModalButton } from "@/components/common/AddToCartModal/OpenAddToCartModalButton";
import type { HomeProduct,HomeSection } from "@/types/home/type";
import Link from "next/link";
import Image from "next/image";
interface jinGangSectionProps{
  bestSellerSection:HomeSection |undefined;
}
// interface HomeBestSellersProps {
//   bestSellers: HomeProduct[];
// }
const HomeBestSellers = ({ bestSellerSection }: jinGangSectionProps) => {
  const bestSellers: HomeProduct[] = bestSellerSection?.products ?? [];
  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  mx-auto px-12 py-12">
      {/* 标题 */}
      <h2 className="text-4xl text-center font-bold leading-ly-46 mb-6">{bestSellerSection?.title}</h2>

      <div className="grid grid-cols-4 gap-8">
        {bestSellers.map((product) => (
          <div key={product.id} className="flex min-w-0 flex-col gap-2">
            <div className="relative aspect-[3/4] w-full overflow-hidden rounded-sm">
              <Image
                src={product.image_url}
                alt={product.name}
                fill
                sizes="25vw"
                className="object-cover"
              />
            </div>

            <Link
              href="/wiggins-ready-go-250-density-popping-curly-hd-lace-front-wigs-medium-length-human-hair-wigs.html"
              className="truncate text-sm leading-ly-22 font-normal text-gray-800"
            >
              {product.name}
            </Link>

            <div className="flex items-center gap-1">
              <div className="flex">
                {[1, 2, 3, 4, 5].map((star) => (
                  <svg
                    key={star}
                    className="h-4 w-4 text-green-500"
                    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
                productId={product.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>
      <div className="w-[186px] h-[32px] m-auto text-center text-sm leading-ly-32 mt-12 opacity-100 rounded-[29px] bg-white border border-solid">
        View More
      </div>
    </div>
  );
};

export default HomeBestSellers;