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");
import routes from "../config/routes";

/* 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 Link = React.createClass({
  changeURL() {
    console.log(this.props.href);
    window.location.replace(this.props.href);
  },

  render() {
    return (
      <span
        style={ { color: "blue", cursor: "pointer" } }
        onClick={this.changeURL}>
        {this.props.children}
      </span>
    );
  }
});

let ProfileLink = React.createClass({
  render: function () {
    return (
      <div>
        <Link href={"https://github.com/" + this.props.username}>{this.props.username}</Link>
      </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} />
        <ProfileName name={user.name} />
        <ProfileLink username={user.username} />
      </div>
    );
  }
});

ReactDOM.render(
  routes,
  document.getElementById("app")
);