import AccountSwiper from "@components/customer/accountSwiper";
import AccountHeader from "./_components/AccountHeader"
import AccountBottomHrefSwiper from "./_components/AccountBottomHrefSwiper"
// import Link from "next/link";
const orderNavs = [
  {
    href: "/customer/order/history/#all",
    img: "/image/navigate/202309040910.png",
    text: "All",
  },
  {
    href: "/customer/order/history/#processing",
    img: "/image/navigate/202309040911.png",
    text: "Processing",
  },
  {
    href: "/customer/order/history/#complete",
    img: "/image/navigate/202309040912.png",
    text: "Complete",
  },
  { 
    href: "/customer/order/history/#paymentreview",
    img: "/image/navigate/202309040913.png",
    text: (
      <>
        Payment
        <br />
        Review
      </>
    ),
  },
];

const MyAccountPage = () => {
  
  return (
    <div className="min-h-screen bg-white">
      <AccountHeader />
      {/* 我的订单 */}
      <div className="">
        <h3 className="mt-8 ml-4 text-base">My Order</h3>
        <div className="flex flex-wrap justify-between mt-5 pr-4 pl-4">
          {orderNavs.map((item, index) => (
            <a
              key={index}
              href={item.href}
              className="decoration-none color-black"
            >
              <div className="w-21 flex flex-col items-center font-medium text-xs">
                <img
                  src={item.img}
                  className={`w-6 h-6 ${index == 3 ? "mb-0.5" : ""}`}
                  alt=""
                />
                <p className="text-center mt-2.5">{item.text}</p>
              </div>
            </a>
          ))}
        </div>
      </div>

      <div className="h-2.5 bg-[#F0F0F0]"></div>

      {/* 服务菜单 */}
      {/* <div className="">
        <h3 className="text-base mt-7.5 ml-4 font-bold">Alipearl Service</h3>
        <div className="grid grid-cols-4 gap-1 text-center font-medium text-xs pr-4 pl-4 mb-7.5">
          <a className="flex flex-col items-center mt-5">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              className="h-6 w-6 "
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={1.5}
                d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
              />
            </svg>
            <span className="mt-2.5">Wishlist</span>
          </a>
          <a className="flex flex-col items-center mt-5">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              className="h-6 w-6 "
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={1.5}
                d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
              />
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={1.5}
                d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
              />
            </svg>
            <span className="mt-2.5">Shipping Address</span>
          </a>
          <a className="flex flex-col items-center mt-5">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              className="h-6 w-6 "
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={1.5}
                d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
              />
            </svg>
            <span className="mt-2.5">Wholesale</span>
          </a>
        </div>
      </div> */}

      <div className="h-2.5 bg-[#F0F0F0]"></div>
      {/* 商品推荐 */}
      <div className="mb-12.5">
        <div className="flex  justify-between items-center pt-7.5 pb-5 pl-4 pr-4">
          <h1 className="font-bold text-base">You May Like</h1>
          <a className="text-xs text-[#666666]" href="/flash-sale.html">
            View More &gt;
          </a>
        </div>
        {/* 引入轮播组件 */}
        <AccountSwiper />
       {/* 底部跳转轮播 */}
       <AccountBottomHrefSwiper />
      </div>
    </div>
  );
};

export default MyAccountPage;
