'use client';
import { useGraphQlUsersList } from './queries';
import { useState } from 'react';

const PageUsers = () => {
    const [page, setPage] = useState(1);
    const [limit, setLimit] = useState(10);
    const [sort, setSort] = useState({ createdAt: 'desc' });
    const [filters, setFilters] = useState({});
    const { data, isLoading, error } = useGraphQlUsersList({ limit, skip: (page - 1) * limit, sort, filters });
    return (
        <div>
            <h1>Users</h1>
            {isLoading && <p>Loading...</p>}
            {error && <p>Error: {error.message}</p>}
            {data && <p>Total count: {data.totalCount}</p>}
            <div>
                {data && <p>Data: {JSON.stringify(data.data)}</p>}
                <button onClick={() => setPage(page - 1)}>Previous</button>
                <button onClick={() => setPage(page + 1)}>Next</button>
            </div>
        </div>
    )
}

export { PageUsers };