import React, {Component} from 'react'

function ImgTag({imgLink}){
  return imgLink && (<div className="message-img"><img src={imgLink} alt="An image in the chat"/></div>);
}

function Message({msg}){
  return (
    <div className="message">
      <span className={`message-username ${msg.color}`}>{ msg.username }</span>
      <span className="message-content">
        { msg.content }
        { this.imgTag(msg.imgUrl) }
      </span>
    </div>
  )

}

function Messages({msgData}){
  const msgs = msgData.map((msg) => (msg.type === 'message' ? <Message key={msg.uuid} msg={msg}/> : <div key={msg.uuid} className="message system">
  { msg.content }
</div>));

  return (
      <section id="message">{ msgs }</section>
    )

}

export default Messages