"use client";
import { useAuth } from "../contexts/AuthContext";

export default function AuthStatus() {
  const { isAuthenticated, user, login, logout, loading } = useAuth();

  if (loading) {
    return (
      <div className="auth-status loading">
        <p>Loading authentication status...</p>
      </div>
    );
  }

  return (
    <div className="auth-status">
      <div className="auth-info">
        {isAuthenticated ? (
          <>
            <h3>Authenticated ✅</h3>
            {user && (
              <div className="user-info">
                <p>Name: {user.name || "N/A"}</p>
                <p>Email: {user.email || "N/A"}</p>
              </div>
            )}
          </>
        ) : (
          <h3>Not authenticated ❌</h3>
        )}
      </div>

      <div className="auth-actions">
        {isAuthenticated ? (
          <button onClick={logout} className="logout-button">
            Sign Out
          </button>
        ) : (
          <button onClick={login} className="login-button">
            Sign In
          </button>
        )}
      </div>
    </div>
  );
}