import BasicWindow from "../../Components/BasicWindow";
import Button from "../../Components/Button";
import BackButton from "../../Components/BackButton";
import { UserListAdmin } from "../../Components/UserListAdmin";
import { User } from "../../Types/Users";
import { useNavigate } from "react-router-dom";

function AdminManageUsers(): JSX.Element {
  //TODO: Change so that it reads users from database
  const users: User[] = [];
  for (let i = 1; i <= 20; i++) {
    users.push({ id: i, userName: "Example User " + i });
  }

  const navigate = useNavigate();

  const content = (
    <>
      <h1 className="font-bold text-[30px] mb-[20px]">Manage Users</h1>
      <div className="border-4 border-black bg-white flex flex-col items-center h-[65vh] w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]">
        <UserListAdmin users={users} />
      </div>
    </>
  );

  const buttons = (
    <>
      <Button
        text="Add User"
        onClick={(): void => {
          navigate("/admin-add-user");
        }}
      />
      <BackButton />
    </>
  );

  return <BasicWindow username="Admin" content={content} buttons={buttons} />;
}
export default AdminManageUsers;