import { Link } from "react-router-dom";
import { User } from "../Types/Users";

/**
 * The props for the UserProps component
 */
interface UserProps {
  users: User[];
}

/**
 * A list of users for admin manage users page, that links admin to the right user page
 * thanks to the state property
 * @param props - The users to display
 * @returns {JSX.Element} The user list
 * @example
 * const users = [{ id: 1, userName: "Random name" }];
 * return <UserList users={users} />;
 */

export function UserListAdmin(props: UserProps): JSX.Element {
  return (
    <div>
      <ul className="font-bold underline text-[30px] cursor-pointer padding">
        {props.users.map((user) => (
          <Link to="/admin-view-user" key={user.id} state={user.userName}>
            <li className="pt-5" key={user.id}>
              {user.userName}
            </li>
          </Link>
        ))}
      </ul>
    </div>
  );
}
