// import React, { useEffect, useState } from "react";
// import { useParams } from "react-router-dom";
// import { DefaultService } from "../../api/services/DefaultService";
// import type { User } from "../../api/models/User";
// import styles from "./UserPage.module.css";

// const UserPage: React.FC = () => {
//   const { id } = useParams<{ id: string }>();
//   const [user, setUser] = useState<User | null>(null);
//   const [loading, setLoading] = useState(true);
//   const [error, setError] = useState<string | null>(null);

//   useEffect(() => {
//     if (!id) return;

//     const getTitleInfo = async () => {
//       try {
//         const userInfo = await DefaultService.getTitle(id, "all");
//         setUser(userInfo);
//       } catch (err) {
//         console.error(err);
//         setError("Failed to fetch user info.");
//       } finally {
//         setLoading(false);
//       }
//     };
//     getTitleInfo();
//   }, [id]);

//   if (loading) return <div className={styles.loader}>Loading...</div>;
//   if (error) return <div className={styles.error}>{error}</div>;
//   if (!user) return <div className={styles.error}>User not found.</div>;

//   return (
//     <div className={styles.container}>
//       <div className={styles.card}>
//         <div className={styles.avatar}>
//           {user.avatar_id ? (
//             <img
//               src={`/images/${user.avatar_id}.png`}
//               alt="User Avatar"
//               className={styles.avatarImg}
//             />
//           ) : (
//             <div className={styles.avatarPlaceholder}>
//               {user.disp_name?.[0] || "U"}
//             </div>
//           )}
//         </div>

//         <div className={styles.info}>
//           <h1 className={styles.name}>{user.disp_name || user.nickname}</h1>
//           <p className={styles.nickname}>@{user.nickname}</p>
//           {user.user_desc && <p className={styles.desc}>{user.user_desc}</p>}
//           <p className={styles.created}>
//             Joined: {new Date(user.creation_date).toLocaleDateString()}
//           </p>
//         </div>
//       </div>
//     </div>
//   );
// };

// export default UserPage;