import React from "react";

import { BsPersonCircle } from "react-icons/bs";

import { CWClientContext } from "../../CubicWebClient";
import { useCWUsers, CWUser } from "../../hooks/useCWUser";

import "./CWUsers.css";

export const CWUsers: React.FC = () => {
  const { cwserver } = React.useContext(CWClientContext);
  const cwusers: CWUser[] | null = useCWUsers();
  if (cwusers === null) {
    return <div>Loading ...</div>;
  }
  return (
    <div className="cwusers">
      <h1>CWUsers from {cwserver}</h1>
      <ul>
        {cwusers.map((cwuser) => (
          <li key={cwuser.login}>
            <BsPersonCircle /> - {cwuser.firstname} {cwuser.surname} (
            {cwuser.login})
          </li>
        ))}
      </ul>
    </div>
  );
};