import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';
import './Profile.css';

function Profile() {
  const { user, isLoading } = useAuth0();

  if (isLoading) return <div>Loading...</div>;
  if (!user) return <div>No profile data available</div>;

  return (
    <div className="profile-container">
      <h2>Profile</h2>
      <div className="profile-content">
        {user.picture && (
          <img 
            src={user.picture} 
            alt="Profile" 
            className="profile-picture"
          />
        )}
        <div className="profile-info">
          <p><strong>Name:</strong> {user.name}</p>
          <p><strong>Email:</strong> {user.email}</p>
          <p><strong>Email Verified:</strong> {user.email_verified ? 'Yes' : 'No'}</p>
          {user.nickname && (
            <p><strong>Nickname:</strong> {user.nickname}</p>
          )}
          {user.updated_at && (
            <p><strong>Last Updated:</strong> {new Date(user.updated_at).toLocaleDateString()}</p>
          )}
        </div>
      </div>
    </div>
  );
}

export default Profile; 