import React, { PropTypes } from 'react'
import classNames from 'classnames'
import styles from './index.css'

const propTypes = {
  className: PropTypes.string,
  children: PropTypes.node,
  align: PropTypes.oneOf([undefined, 'left', 'right']),
}

const defaultProps = {
  className: '',
}

const ChatItem = ({ className, children, align, ...other }) => {
  const clsNm = classNames({
    [styles.chatItem]: true,
    [styles.left]: align === undefined || align === 'left',
    [styles.right]: align === 'right',
  })

  return (
    <div {...other} className={`${clsNm} ${className}`}>
      {children}
    </div>
  )
}

ChatItem.propTypes = propTypes
ChatItem.defaultProps = defaultProps

export default ChatItem