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

export default class ConversationStream extends React.PureComponent {

  static propTypes = {
    messages: PropTypes.array,
  };

  render() {
    let messagesLists = (
      <div className='no_messages'>
        no messages
      </div >
    );

    if (this.props.messages) {

      messagesLists = this.props.messages.map(message => {
        return (
          <li
            className={'message ' + message.who}
            key={message.id}
          >
            <p >{message.text}</p >
            <div className='arrow-down' />
          </li >
        );
      });

    }
    return (
      <div className='conversation-stream'>
        <div className='messages'>
          {messagesLists}
          <hr className='marker'/>
        </div >
      </div >
    );
  }

}