import React from "react";
import { OverlayTrigger, Tooltip } from "react-bootstrap";
// class Participant extends React.Component {
//   render() {
//     const { participant } = this.props;
//     const style = {
//       backgroundImage: `url(${participant.img})`
//     };
//     // console.log("EN participants", participant);
//     return <div className="participant" style={style}></div>;
//     // return <p>hello</p>;
//   }
// }

// export default Participant;

function Participant(props) {
  const { participant } = props;
  // const style = {
  //   backgroundImage: `url(${participant.img})`
  // };
  return (
    <OverlayTrigger
      placement="top"
      overlay={
        <Tooltip id={`tooltip-top`}>
          <strong>{participant.username}</strong>
        </Tooltip>
      }
    >
      <div
        className="participant"
        style={{ backgroundImage: `url(${participant.img})` }}
      ></div>
    </OverlayTrigger>
  );
}

export default Participant;