import { getUsers } from "@/utils/querys/admin/users";
import { useQuery } from "@tanstack/react-query";
import UserCard from "./components/UserCard";

export default function UserPage() {
    const { data, isError, error, isLoading } = useQuery(getUsers());

    if (isLoading) return <div className="m-auto">Loading users...</div>;

    if (isError)
        return (
            <div className="m-auto">
                There was an error getting the users.... {JSON.stringify(error)}
            </div>
        );

    return (
        <div className="m-2 w-dvw">
            {data.map((u: any) => {
                return (
                    <div>
                        <UserCard user={u} />
                    </div>
                );
            })}
        </div>
    );
}
