import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';

export default function MyProfilePage() {
  const { user, isAuthenticated, isLoading } = useAuth();
  const navigate = useNavigate();

  useEffect(() => {
    if (isLoading) {
      return; // Wait until loading is complete
    }

    if (!isAuthenticated) {
      navigate('/login', { replace: true });
    } else if (user?.username) {
      navigate(`/profile/${user.username}`, { replace: true });
    }
    // If user has no username for some reason, they will stay on a blank page.
    // A better implementation would redirect to a 'complete your profile' page.

  }, [user, isAuthenticated, isLoading, navigate]);

  return (
    <div className="w-full h-screen flex items-center justify-center">
      <p>Loading your profile...</p>
    </div>
  );
}