import React from 'react';

export default function UserInfo(props) {
  return (
    <div className="user-info">
      <div className="dc-row">
        <div className="dc-column--shrink">
          <i className="dc-icon dc-icon--user user-info__icon">
            <span>{props.username}</span>
          </i>
        </div>
        <div className="dc-column">
          {props.authenticated ? (
            <span
              onClick={props.onLogout}
              className="dc-link dc-link--destroy user-info__logout"
            >
              logout
            </span>
          ) : (
            <span
              onClick={props.onLogin}
              className="dc-link dc-link--success user-info__login"
            >
              login
            </span>
          )}
        </div>
      </div>
    </div>
  );
}