import React from 'react'
const ExpandedComment = props => {
  const { text } = props
  return (
    <li key={props.id}>
      <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>
            {props.replies.length > 0 ? (
              <span
                className="a ml-3"
                style={{
                  fontVariant: 'small-caps',
                  color: 'blue',
                  cursor: 'pointer',
                }}
                onClick={() => props.toggleCollapse(props.id)}
              >
                collapse
              </span>
            ) : (
              ''
            )}
          </div>
        </div>
      </div>
      <div>{text}</div>
      <a href="#replies">reply</a>
    </li>
  )
}

export default ExpandedComment