import React from 'react';
import PropTypes from 'prop-types';

import UserPicture from './UserPicture';

export default class User extends React.Component {
  render() {
    const user = this.props.user;
    const userLink = `/user/${user.username}`;

    const username = this.props.username;
    const name = this.props.name;

    return (
      <span className="user-component">
        <a href={userLink}>
          <UserPicture user={user} />

          {username
              && (
              <span className="user-component-username">
@
                {user.username}
              </span>
)
          }
          {name
              && (
              <span className="user-component-name">
(
                {user.name}
)
              </span>
)
          }
        </a>
      </span>
    );
  }
}

User.propTypes = {
  user: PropTypes.object.isRequired,
  name: PropTypes.bool.isRequired,
  username: PropTypes.bool.isRequired,
};

User.defaultProps = {
  name: false,
  username: false,
};