import React from 'react'

const ExpandedComment = props => {
  return (
    <li
      className=""
      key={props.id}
      onMouseEnter={() => props.showCollapseLink(props.id, true)}
      onMouseLeave={() => props.showCollapseLink(props.id, false)}
    >
      <div className="media bg bg-dark">
        <img alt="profile" src="anon.jpeg" height={64} />

        <div className="media-body ml-3 my-auto">
          <a className="" href="#user">
            username
          </a>
        </div>
        <div className="white">
          <small>{props.createdAt}</small>
          {props.replies.length > 0 ? (
            <span
              className="a ml-3"
              style={{
                fontVariant: 'small-caps',
                color: 'blue',
                cursor: 'pointer',
                display: props.displayCollapse || 'none',
              }}
              onClick={() => props.toggleCollapse(props.id)}
            >
              collapse
            </span>
          ) : (
            ''
          )}
          <a
            className="float-right ml-2"
            href="#replies"
            onClick={props.replyToComment}
          >
            reply
          </a>
        </div>
      </div>
      <div className="">{props.text}</div>
    </li>
  )
}

export default ExpandedComment