import React, { useState, useEffect } from 'react';
import { authService } from '../services/auth';
import './Profile.css';

function Profile() {
  const [profile, setProfile] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchProfile = async () => {
      try {
        const userData = await authService.getUser();
        setProfile(userData);
      } catch (error) {
        console.error('Error fetching profile:', error);
        setError('Failed to load profile');
      } finally {
        setIsLoading(false);
      }
    };

    fetchProfile();
  }, []);

  if (isLoading) {
    return <div className="profile-loading">Loading profile...</div>;
  }

  if (error) {
    return <div className="profile-error">{error}</div>;
  }

  if (!profile) {
    return <div className="profile-error">No profile data available</div>;
  }

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

export default Profile; 