Perfil de Usuario

"use-client";-import-React,-{-useEffect,-useState-}-from-"react";-import-{-auth,-db-}-from-"../../../services/firebase";-import-{-doc,-getDoc-}-from-"firebase/firestore";-import-{-useRouter-}-from-"next/navigation";-import-Navbar-from-'../../components/Navbar';-const-ProfilePage-=-()-=>-{-const-[userData,-setUserData]-=-useState(null);-//-Estado-para-guardar-los-datos-del-usuario-const-[loading,-setLoading]-=-useState(true);-//-Estado-para-manejar-el-cargando-const-[error,-setError]-=-useState(null);-//-Estado-para-errores-const-router-=-useRouter();-//-Para-redirigir-useEffect(()-=>-{-const-fetchUserData-=-async-()-=>-{-try-{-const-user-=-auth.currentUser;-if-(!user)-{-//-Si-no-hay-un-usuario-autenticado,-redirigir-al-login-router.push("/Perfil");-return;-}-//-Obtener-los-datos-del-usuario-desde-Firestore-const-userDoc-=-await-getDoc(doc(db,-"users",-user.uid));-if-(userDoc.exists())-{-setUserData(userDoc.data());-//-Guardamos-los-datos-del-usuario-en-el-estado-}-else-{-setError("No-se-encontraron-datos-para-este-usuario.");-}-}-catch-(error)-{-setError("Hubo-un-error-al-cargar-los-datos-del-perfil.");-}-finally-{-setLoading(false);-//-Finaliza-el-estado-de-carga-}-};-fetchUserData();-},-[router]);-if-(loading)-{-return-(-<div-className="profile-container">-<h1>Cargando...</h1>-</div>-);-}-if-(error)-{-return-(-<div-className="profile-container">-<h1>Error</h1>-<p>{error}</p>-</div>-);-}-//-Asegúrate-de-que-userData-no-es-null-antes-de-acceder-a-sus-propiedades-if-(!userData)-{-return-(-<div-className="profile-container">-<h1>No-se-encontraron-datos-del-usuario.</h1>-</div>-);-}-return-(-<div>-<Navbar/>-<hr></hr>-<hi></hi>-<div-className="profile-container">-<h1>Perfil-de-{userData.name-||-"Nombre-no-disponible"}</h1>-<div-className="profile-info">-<h3>Información-del-Usuario</h3>-<p><strong>Correo:</strong>-{userData.email}</p>-<p><strong>Nombre:</strong>-{userData.name-||-"Nombre-no-disponible"}-{userData.surname-||-"Apellido-no-disponible"}</p>-<p><strong>Teléfono:</strong>-{userData.phone-||-"Teléfono-no-disponible"}</p>-<p><strong>Descripción:</strong>-{userData.description-||-"Descripción-no-disponible"}</p>-</div>-</div>-</div>-);-};-export-default-ProfilePage;