// import { useGetSingleUser } from "@/models/Users/UserModel";
// import React from "react";

// interface UserDetailsProps {
//   id;
// }

// const formatDate = (dateString?: string) => {
//   if (!dateString) return "-";
//   const date = new Date(dateString);
//   const day = String(date.getDate()).padStart(2, "0");
//   const month = String(date.getMonth() + 1).padStart(2, "0");
//   const year = date.getFullYear();
//   return `${day}-${month}-${year}`;
// };

// const UserDetails: React.FC<UserDetailsProps> = ({ id }) => {
//   const { data, isLoading } = useGetSingleUser({ userId: id });

//   console.log(data);

//   return (
//     <div className="max-w-2xl mx-auto bg-white dark:bg-gray-900 rounded-xl shadow-lg p-8 mt-10">
//       <div className="flex flex-col items-center">
//         <img
//           src={
//             user.profilePicture
//               ? `${process.env.NEXT_PUBLIC_PORT}/${user.profilePicture}`
//               : "/assets/icons/user-placeholder.svg"
//           }
//           alt="Profile"
//           className="w-32 h-32 rounded-full object-cover border-4 border-[var(--primary-theme-color)] mb-4"
//         />
//         <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-1">
//           {user.firstName} {user.lastName}
//         </h2>
//         <p className="text-gray-500 dark:text-gray-300 mb-4">
//           {user.status || "Active"}
//         </p>
//       </div>
//       <div className="mt-6 space-y-4">
//         <div className="flex justify-between">
//           <span className="font-medium text-gray-700 dark:text-gray-200">
//             Email:
//           </span>
//           <span className="text-gray-900 dark:text-white">{user.email}</span>
//         </div>
//         <div className="flex justify-between">
//           <span className="font-medium text-gray-700 dark:text-gray-200">
//             Phone:
//           </span>
//           <span className="text-gray-900 dark:text-white">
//             {user.phoneNumber}
//           </span>
//         </div>
//         <div className="flex justify-between">
//           <span className="font-medium text-gray-700 dark:text-gray-200">
//             Joined:
//           </span>
//           <span className="text-gray-900 dark:text-white">
//             {formatDate(user.createdAt)}
//           </span>
//         </div>
//         {/* Add more fields as needed */}
//       </div>
//     </div>
//   );
// };

// export default UserDetails;