import React from "react";
import Link from "next/link";
import  DefaultAddress from "./_components/DefaultAddress";
const CustomerAddressPage = async () => {
  // 模拟地址数据（可根据实际需求替换）
  const addressData = {
    billing: {
      name: "zhang xxxx",
      line1: "ddddd",
      line2: "aaaaaaaa",
      cityStateZip: "cscsc, Alabama, 90605",
      country: "United States",
      phone: "2123165641",
    },
    shipping: {
      name: "zhang xxxx",
      line1: "ddddd",
      line2: "aaaaaaaa",
      cityStateZip: "cscsc, Alabama, 90605",
      country: "United States",
      phone: "2123165641",
    },
  };
 
  return (
    <div className="w-full h-full">
      <div className="bg-[#fff] pr-2.5 pl-2.5 w-full text-center text-base h-11 leading-11 font-semibold relative text-[#0b0b0b]">
        <Link href={"/customer/account"}
          // onClick={() => window.history.back()}
          className="absolute left-2.5 text-2xl inline-block top-1/2  -translate-y-1/2"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
          >
            <path
              stroke="rgba(0, 0, 0, 1)"
              stroke-width="1.2"
              stroke-linejoin="round"
              stroke-linecap="round"
              d="M15 18L9 12L15 6"
            ></path>
          </svg>
        </Link>
        <span className="vipReturnTitles">SHIPPING ADDRESS</span>
      </div>
      <div className="max-w-md mx-auto p-4 bg-[#f8f8f8]">
        <DefaultAddress  />
        {/* 账单地址模块 */}
        <div className="mb-6">
          <h2 className="text-xl font-bold uppercase mb-3">
            Default Billing Address
          </h2>
          <div className="border border-gray-200 p-4">
            <p className="mb-1">{addressData.billing.name}</p>
            <p className="mb-1">{addressData.billing.line1}</p>
            <p className="mb-1">{addressData.billing.line2}</p>
            <p className="mb-1">{addressData.billing.cityStateZip}</p>
            <p className="mb-1">{addressData.billing.country}</p>
            <p className="mb-4">T: {addressData.billing.phone}</p>
            <div className="text-right">
              <a
                href="#"
                className="text-blue-600 underline hover:text-blue-800"
              >
                Change Billing Address
              </a>
            </div>
          </div>
        </div>
        
        {/* 收货地址模块 */}
        <div>
          <h2 className="text-xl font-bold uppercase mb-3">
            Default Shipping Address
          </h2>
          <div className="border border-gray-200 p-4">
            <p className="mb-1">{addressData.shipping.name}</p>
            <p className="mb-1">{addressData.shipping.line1}</p>
            <p className="mb-1">{addressData.shipping.line2}</p>
            <p className="mb-1">{addressData.shipping.cityStateZip}</p>
            <p className="mb-1">{addressData.shipping.country}</p>
            <p className="mb-4">T: {addressData.shipping.phone}</p>
            <div className="text-right">
              <a
                href="#"
                className="text-blue-600 underline hover:text-blue-800"
              >
                Change Shipping Address
              </a>
            </div>
          </div>
        </div>
        <Link href={"/customer/address/new"} className="text-center bg-[#000] block text-white mt-5  width-full height-11 leading-11 text-lg" >
          + New Address
        </Link>
      </div>
    
    </div>
  );
};
export default CustomerAddressPage;
