import React, { Component } from 'react';
import PropTypes from 'prop-types';

import DefaultAvatar from './default-avatar.svg';

class UserAvatar extends Component {
  static propTypes = {
    name: PropTypes.string,
    avatar: PropTypes.string,
    fileContent: PropTypes.string,
  };
  static defaultProps = {
    name: null,
    avatar: null,
    fileContent: null,
  };

  render() {
    const { name, avatar, fileContent } = this.props;

    let style = null;
    if (avatar) {
      style = { backgroundImage: `url(${avatar})` };
    }
    if (fileContent) {
      style = { backgroundImage: `url(${fileContent})` };
    }

    return (
      <div className="UserAvatar">
        <div className="UserAvatar-avatar" style={style}>
          {!(avatar || fileContent) && <DefaultAvatar />}
        </div>
        {name && <div className="UserAvatar-name">{name}</div>}
      </div>
    );
  }
}

export default UserAvatar;