import React, { useEffect, useState } from 'react'
import moment from 'moment'
import classNames from 'classnames'
import Styles from './style.less'

export default props => {
  
  const title = `${props.name} ${moment(props.date).format('YYYY-MM-DD HH:mm')}`

  return (
    <div className={classNames(Styles['message-item'], {[Styles.right]: props.right})}>
      <div className={classNames(Styles['flex-row'], {[Styles.right]: props.right})}>
        <div className={classNames(Styles.header, Styles.gutter)}></div>
        <div className={classNames(Styles.gutter)}>
          {props.right && <span className={Styles.title}>{moment(props.date).format('YYYY-MM-DD HH:mm')}</span>}
          <span className={Styles.title}>{props.name}</span>
          {!props.right && <span className={Styles.title}>{moment(props.date).format('YYYY-MM-DD HH:mm')}</span>}
        </div>
      </div>
      <div className={classNames(Styles['flex-row'], {[Styles.right]: props.right})}>
        <div className={classNames(Styles.header, Styles.gutter)}>
          <img src={props.avatar} className={classNames(Styles.header, Styles.avatar)} alt=""/>
        </div>
        <div className={classNames(Styles.gutter)}>
          <div className={classNames(Styles.poptip, {[Styles.right]: props.right})}>
            {props.content}
          </div>
        </div>
      </div>
    </div>
  )
}
