import { useEffect, useState } from "react";
import { getUsers } from "../services/userService";

export default function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    async function loadData() {
      const res = await getUsers();
      setUsers(res);
    }
    loadData();
  }, []);

  return (
    <div>
      <h2>Usuarios</h2>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Nombre</th>
            <th>Email</th>
            <th>Rol ID</th>
            <th>Propiedad ID</th>
            <th>Contraseña</th>
          </tr>
        </thead>
        <tbody>
          {users.map((u) => (
            <tr key={u.id_users}>
              <td>{u.id_users}</td>
              <td>{u.name_user}</td>
              <td>{u.mail}</td>
              <td>{u.id_roles}</td>
              <td>{u.id_properties}</td>
              <td>{u.password_user}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}



// import { useEffect, useState } from "react";
// import { getUsers } from "../services/userService";

// export default function Users() {
//   const [users, setUsers] = useState([]);

//   useEffect(() => {
//     async function loadData() {
//       const res = await getUsers();
//       setUsers(res);
//     }
//     loadData();
//   }, []);

//   return (
//     <div>
//       <h2>Usuarios</h2>
//       <table>
//         <thead>
//           <tr>
//             <th>Nombre</th>
//             <th>Email</th>
//             <th>Rol</th>
//           </tr>
//         </thead>
//         <tbody>
//           {users.map((u) => (
//             <tr key={u.id}>
//               <td>{u.name}</td>
//               <td>{u.mail}</td>
//               <td>{u.role_name}</td>
//             </tr>
//           ))}
//         </tbody>
//       </table>
//     </div>
//   );
// }
