// app/(account)/account/page.tsx
"use client";

import { useAuth } from "@/context/AuthContext";

export default function AccountPage() {
  const { user, loading } = useAuth();

  if (loading) return <div className="text-sm opacity-70">Loading…</div>;

  if (!user) {
    return (
      <div className="text-sm opacity-70">
        You’re not logged in. Please log in to view your account.
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <div>
        <h2 className="text-lg font-semibold">Profile</h2>
        <p className="text-sm opacity-70">
          Basic account info (we’ll expand this soon).
        </p>
      </div>

      <div className="rounded-xl border border-white/10 bg-white/5 p-4 space-y-2">
        <div className="text-sm">
          <span className="opacity-70">Email:</span>{" "}
          <span className="font-medium">{user.email}</span>
        </div>
        <div className="text-sm">
          <span className="opacity-70">Display name:</span>{" "}
          <span className="font-medium">{user.displayName || "—"}</span>
        </div>
        <div className="text-sm">
          <span className="opacity-70">Role:</span>{" "}
          <span className="font-medium">{user.role}</span>
        </div>
      </div>
    </div>
  );
}