"use client";
import { Swiper, SwiperSlide } from 'swiper/react';
import Image from 'next/image';
import 'swiper/css';
// 模拟商品数据（和图片内容匹配）
const productList = [
  {
    id: 1,
    imgUrl: "https://cdn.alipearlhair.com/media/catalog/product/cache/6/thumbnail/750x1000/9df78eab33525d08d6e5fb8d27136e95/b/o/body_wave_lace_front_wig_2.jpg", // 替换成你的真实图片路径（public下）
    title: "Widow's Peak M Hairline 13x6 HD Lace Front Wig N...",
    price: "$132.91",
    originalPrice: "$204.16",
    tag: "Extra $50 OFF | Code: MW50 | This Week",
  },
  {
    id: 2,
    imgUrl: "https://cdn.alipearlhair.com/media/catalog/product/cache/6/thumbnail/750x1000/9df78eab33525d08d6e5fb8d27136e95/b/o/body_wave_lace_front_wig_2.jpg", // 替换成你的真实图片路径
    title: "Alipearl Deep Wave Wig 100% Human Hair Swiss...",
    price: "$149.66",
    originalPrice: "$199.54",
    tag: "", // 第二个商品无标签
  },
  // 可添加更多商品
];
const AccountSwiper = () => {
  return (
    <div className="w-full max-w-[700px] mx-auto px-4">
      {/* Swiper 核心容器 */}
      <Swiper
     
        slidesPerView={2} // 一行显示2个商品（和图片一致）
        spaceBetween={8} // 商品之间的间距
        breakpoints={{
          // 响应式适配（小屏显示1个）
          390: { slidesPerView: 2 },
          640: { slidesPerView: 2 },
        }}
        className="product-swiper"
      >
        {/* 循环渲染商品卡片 */}
        {productList.map((product) => (
          <SwiperSlide key={product.id} className="rounded-lg overflow-hidden">
            <div className="flex flex-col h-full">
              {/* 商品图片（带标签） */}
              <div className="relative w-full aspect-[3/4]">
                <Image
                  src={product.imgUrl}
                  alt={product.title}
                  fill
                  className="w-full h-auto object-cover rounded-t-lg"
                />
                {/* 促销标签（有内容才显示） */}
                {product.tag && (
                  <div className="absolute bottom-2 left-2 bg-black/80 text-white text-xs px-2 py-1 rounded">
                    {product.tag}
                  </div>
                )}
              </div>

              {/* 商品标题 */}
              <p className="mt-3 text-sm text-gray-800 font-medium line-clamp-2">
                {product.title}
              </p>

              {/* 价格区域 */}
              <div className="flex items-center gap-2 mt-2">
                <span className="text-red-600 font-bold">{product.price}</span>
                <span className="text-xs text-gray-500 line-through">
                  {product.originalPrice}
                </span>
                {/* 购物车图标 */}
                <span className="ml-auto text-gray-600">🛒</span>
              </div>
            </div>
          </SwiperSlide>
        ))}
      </Swiper>

      {/* 分页器容器（底部小圆点） */}
      {/* <div className="swiper-pagination flex justify-center mt-4"></div> */}
    </div>
  );
};

export default AccountSwiper;