import {
    Accordion,
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
} from "@/components/ui/accordion";
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">
            <Accordion type="single" collapsible>
                {data.map((u: any) => {
                    return (
                        <AccordionItem key={u.user_id} value={u.user_id}>
                            <AccordionTrigger>
                                <span>{u.username}</span>
                            </AccordionTrigger>
                            <AccordionContent>
                                <div>
                                    <UserCard user={u} />
                                </div>
                            </AccordionContent>
                        </AccordionItem>
                    );
                })}
            </Accordion>
        </div>
    );
}