"use client";
import { useEffect, useState } from "react";

// 地址类型
interface AddressData {
  name: string;
  line1: string;
  line2: string;
}

export default function TrackAddress() {
  const [addr, setAddr] = useState<AddressData | null>(null);

  // 模拟接口拿单条订单地址数据
  useEffect(() => {
    const getAddress = async () => {
      // 模拟接口返回假数据，和截图一致
      const mockRes: AddressData = {
        name: "zhang zhenfei",
        line1: "aaaaaaaaaaaa, zzzzzzzz, Alabama",
        line2: "90602, United States",
      };
      setAddr(mockRes);
    };
    getAddress();
  }, []);

  if (!addr) return <div className="p-4 text-gray-500">加载地址...</div>;

  return (
    <div className="flex items-start gap-3 py-3 border-b border-gray-200">
      {/* 飞机图标 */}
      <div className="mt-1 shrink-0 text-gray-700">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M17 16l-4-4V7h4l-4-4-4 4h4v5l-4 4" />
          <line x1="12" y1="19" x2="12" y2="22" />
        </svg>
      </div>

      {/* 地址文本 */}
      <div className="flex flex-col">
        <p className="text-gray-800">{addr.name}, {addr.line1}</p>
        <p className="text-gray-600 mt-1">{addr.line2}</p>
      </div>
    </div>
  );
}