const USER_DATA = {
  name: "Tyler McGinnis",
  username: "tylermcginnis",
  image: "https://avatars0.githubusercontent.com/u/2933430?v=3&s=460"
};

let React = require("react");
let ReactDOM = require("react-dom");

/* React components should be:

 Focused
 Independent
 Reusable
 Small
 Testable

 */

let ProfilePic = React.createClass({
  render: function () {
    return (
      <img src={this.props.imageUrl} style={{ height: 100, width: 100 }} />
    );
  }
});

let ProfileLink = React.createClass({
  render: function () {
    return (
      <div>
        <a href={"https://github.com/" + this.props.username}>{this.props.username}</a>
      </div>
    );
  }
});

let ProfileName = React.createClass({
  render: function () {
    return (
      <div>{this.props.name}</div>
    );
  }
});

let Avatar = React.createClass({
  render: function () {
    const user = this.props.user;
    return (
      <div>
        <ProfilePic imageUrl={user.image} />
        <ProfileLink username={user.username} />
        <ProfileName name={user.name} />
      </div>
    );
  }
});

ReactDOM.render(
  <Avatar user={USER_DATA} />,
  document.getElementById("app")
);