nshop-front-pc/src/app/(public)/customer/account/_components/AccountBottomHrefSwiper.tsx

"use client";

import { useEffect, useRef } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
// 只导入 Autoplay 即可！loop 内置了
import { Autoplay } from "swiper/modules";

import "swiper/css";

const AccountBottomHrefSwiper = () => {
  const swiperRef = useRef<any>(null);

  const footerCategorySlides = [
    { url: "/new-arrival.html", title: "New Arrival" },
    { url: "/hd-lace-wig.html", title: "HD Lace" },
    { url: "/effortless-wig.html", title: "Ready To Go Wigs" },
    { url: "/ombrecolorwigs.html", title: "Color" },
    { url: "/lace-frontal-wig.html", title: "Lace Frontal Wigs" },
    { url: "/closure-wigs.html", title: "Closure Wigs" },
  
  ];

  // 登录/注册/找回密码页面隐藏
  useEffect(() => {
    const path = window.location.pathname;
    const hidePaths = [
      "/customer/account/login",
      "/customer/account/forgotpassword",
      "/customer/account/create",
    ];

    if (hidePaths.some((p) => path.includes(p))) {
      const el = document.querySelector(".footer-bottom-category");
      if (el) el.remove();
    }
  }, []);

  return (
    <div className="footer-bottom-category bg-white py-3">
        <p className="underline text-center font-bold bg-[#eee] leading-8 ">
            HOW TO GET MORE POINTS?
        </p>
      <div className="footer-bottom-category-list container mx-auto px-4 bg-[#fff8f2] height-12.5 flex items-center ">
        <Swiper
          ref={swiperRef}
          // ✅ 只需要 Autoplay
          modules={[Autoplay]}
          // ✅ loop 直接写，不需要模块！
        //   loop={true}
          slidesPerView="auto"
          spaceBetween={12}
          autoplay={{
            delay: 1000,
            disableOnInteraction: false,
          }}
          className="footer-bottom-category-swiper"
        >
          {footerCategorySlides.map((item, index) => (
            <SwiperSlide key={index} className="!w-auto footer-bottom-category-item whitespace-nowrap px-4 py-2 text-sm text-gray-700 rounded-lg border border-solid border-[#b32400]">
              <a
                href={item.url}
                className=" "
              >
                {item.title}
              </a>
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
    </div>
  );
};

export default AccountBottomHrefSwiper;