import React, { FunctionComponent } from 'react';
import { User } from '../../types/user';

export interface MembersPanelProps {
  users: User[]
}

export const MembersPanel: FunctionComponent<MembersPanelProps> = ({ users }) => {
  return (
    <nav className="panel">
      <p className="panel-heading">
        Membres
      </p>
      {
        users.map(u => {
          return (
            <div key={`user-${u.id}`} className="panel-block">
              <span className="panel-icon">
                <i className="fas fa-user" aria-hidden="true"></i>
              </span>
              <span>{`${ u.name ? (u.name + '  - ') : '' }`}</span><span className="is-italic">{`${u.email}`}</span>
            </div>
          );
        })
      }
      {
        users.length === 0 ?
        <a className="panel-block has-text-centered is-block">
          <p className="is-italic">Aucun membre pour l'instant.</p>
        </a> :
        null
      }
    </nav>
  );
}