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

export default function Profile() {
  const { getAccessTokenSilently } = useAuth0();
  const [userProfile, setUserProfile] = useState(null);

  useEffect(() => {
    const getUserProfile = async () => {
      try {
        const token = await getAccessTokenSilently();
        const response = await fetch('http://localhost:3001/api/profile', {
          headers: {
            Authorization: `Bearer ${token}`
          }
        });
        const data = await response.json();
        setUserProfile(data);
      } catch (error) {
        console.error('Error fetching profile:', error);
      }
    };

    getUserProfile();
  }, [getAccessTokenSilently]);

  if (!userProfile) {
    return <div>Loading profile...</div>;
  }

  return (
    <div className="profile-container">
      <h2>Profile</h2>
      <div className="profile-info">
        <img src={userProfile.picture} alt="Profile" className="profile-picture" />
        <div className="profile-details">
          <h3>{userProfile.name}</h3>
          <p>{userProfile.email}</p>
        </div>
      </div>
    </div>
  );
} 