import { useEffect, useState } from "react";
import { getUsers } from "@/api/users";

export default function TestUsers() {

  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetchUsers();
  }, []);

  const fetchUsers = async () => {
    try {

      const res = await getUsers();

      setUsers(res.data);

    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div className="p-10">

      <h1 className="text-2xl font-bold mb-5">
        Data Users
      </h1>

      {users.map((user) => (
        <div
          key={user.id}
          className="border p-3 rounded mb-3"
        >
          <p>{user.username}</p>
        </div>
      ))}

    </div>
  );
}