"use client";

import { useEffect, useState } from "react";

import { api } from "@/lib/api";
import { User } from "@/types/user";

import UserDialog from "@/components/users/UserDialog";
import UserTable from "@/components/users/UserTable";

export default function UsersPage() {

    const [users, setUsers] = useState<User[]>([]);

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

    function loadUsers() {

        api
            .get<User[]>("/users/")
            .then((res) => {

                console.log("API:", res.data);

                setUsers(res.data);

            })
            .catch((err) => {

                console.error("API Fehler:", err);

            });

    }

    return (

        <>

            <div className="flex justify-between items-center mb-8">

                <h1 className="text-4xl font-bold">

                    Benutzer

                </h1>

                <UserDialog />

            </div>

            <pre className="mb-6 rounded bg-black p-4 text-green-400 overflow-auto">

                {JSON.stringify(users, null, 2)}

            </pre>

            <UserTable users={users} />

        </>

    );

}