import React from 'react'

export default props => {
  const { text } = props

  return (
    <li>
      <div className="media bg bg-dark">
        <img alt="profile" src="anon.jpeg" height={64} />
        <div className="media-body ml-3 my-auto">
          <a href="#user">username</a>
          <div>
            <small>July 9 2019, 01:32:27 UTC</small>
            <span
              className="a ml-3"
              style={{
                fontVariant: 'small-caps',
                color: 'blue',
                cursor: 'pointer',
              }}
              onClick={props.toggleCollapse}
            >
              collapse
            </span>
          </div>
        </div>
      </div>
      <div>{text}</div>
      <a href="#replies">reply</a>
    </li>
  )
}