Customer Account Page

// app/account/page.tsx
import dash from "@/lib/dash"

export default async function AccountPage() {
  const { customer } = await dash.auth.getProfile()
  const { orders } = await dash.auth.getOrders({ limit: 5 })

  return (
    <div className="max-w-4xl mx-auto py-12">
      <h1>Welcome, {customer.first_name || "Customer"}!</h1>

      <div className="grid md:grid-cols-2 gap-6 mt-8">
        <div className="border rounded p-6">
          <h2>Profile</h2>
          <p>{customer.email}</p>
          <p>{customer.first_name} {customer.last_name}</p>
          <a href="/account/edit">Edit Profile</a>
        </div>

        <div className="border rounded p-6">
          <h2>Loyalty Points</h2>
          <p className="text-2xl font-bold">{customer.loyalty_points} points</p>
          <p>{customer.tier_name}</p>
          <a href="/rewards">Redeem Points</a>
        </div>
      </div>

      <div className="mt-8">
        <h2>Recent Orders</h2>
        {orders.map(order => (
          <a key={order.id} href={`/account/orders/${order.id}`} className="block border rounded p-4 mb-2">
            <div className="flex justify-between">
              <span>{order.order_number}</span>
              <span>{order.status}</span>
              <span>${order.total}</span>
            </div>
          </a>
        ))}
        <a href="/account/orders">View All Orders</a>
      </div>
    </div>
  )
}