"use client";
import React from "react";
import Link from "next/link";
import { Swiper, SwiperSlide } from "swiper/react";
import { FreeMode } from "swiper/modules";
import "swiper/css";

// 标签数据，可自由增删修改文字、跳转路由
const tabList = [
  { label: "HD Lace Wigs", href: "/category/hd-lace-wigs" },
  { label: "New Arrival", href: "/category/new-arrival" },
  { label: "Wigs", href: "/category/wigs" },
  { label: "Colored Wigs", href: "/category/colored-wigs" },
  { label: "Body Wave", href: "/category/body-wave" },
  { label: "Curly Hair", href: "/category/curly-hair" },
];

const CategoryTabSwiper = () => {
  return (
    <div className="py-4">
      <Swiper
        modules={[FreeMode]}
        freeMode={true}
        slidesOffsetBefore={16}
        slidesOffsetAfter={0}
        spaceBetween={8}
        slidesPerView="auto"
        pagination={false}
        navigation={false}
       
        className="w-full overflow-hidden"
      >
        {tabList.map((tab, idx) => (
          <SwiperSlide key={idx} className="!w-auto">
            <Link
              href={tab.href}
              className="inline-block px-2 border-2 border-black leading-6.5 rounded-sm bg-[#ecfdf5] text-xs text-center font-normal "
            >
              {tab.label}
            </Link>
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
};

export default CategoryTabSwiper;
