class SpeechBubble extends React.Component {
  constructor(props) {
    super(props);
    // props.kind ... speaking, thinking, asking
    this.state = {
      isFade: false
    };
  }


  componentDidMount() {
    setTimeout(function () { //Start the timer
      this.setState({
        isFade: true
      })
    }.bind(this), 30)
  }


  render() {

    let click = (this.props.clickable) ? ' clickable' : '';
    let fade = (this.state.isFade) ? ' fade' : '';

    return (
      <div className={this.props.kind + " message" + click + fade}>
        <div><a href="javascript:void(0)" onClick={this.props.handleClick}><span>{this.props.message}</span></a></div>
      </div>
    );
  }
}