import React from "react";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import UserState from "../common/UserStateIndicator";

class UserGrid extends React.Component {

  render() {
    return (
      <div className="row justify-content-start">
        {this.props.users.map(user => {
          return (
            <div key={user.id} style={{height:120+'px'}} className="align-content-center col-2 border rounded m-1 p-2">
              <h4 className="h-50 m-1">
                {user.firstName} {user.lastName}
              </h4>
              <div className="h-25 m-2">
                <UserState state={user.state} />
                </div>
            </div>
          );
        })}
      </div>
      //maybe justify..-around?{/*className="display-4"text-center */}
    );
  }
}
UserGrid.propTypes = {
  users: PropTypes.array.isRequired
};

export default UserGrid;