import React, { Component } from 'react';
import '../App.css';
import './SessionSummary.css'


// const SessionSummary = ({notes}) => (
//   <ul className="list-group sticky-left">
//     {notes.map((note) =>
//       <li className="list-group-item border-0" key={note.get('_id')}>
//           <a href={'#note-' + note.get('_id')}>
//             <small className="note-time text-warning bg-success border-0 text-center">{formatTimestamp(note.startedAt)}</small>
//             <small className="note-length font-weight-bold px-2 text-muted text-center">{_.words(note.plain).length} mots</small>
//             <small className="note-time text-warning bg-success border-0 text-center">{formatTimestamp(note.finishedAt)}</small>
//           </a>
//       </li>
//     )}
//   </ul>
// )

export default class ProtocolSummary extends Component {
  render() {
    return (
      <div className="mt-5">
        <div>
        <span className="bg-primary">important</span>
        <p className="text-primary">la métacatégorie important</p>
        </div>
        <div>
        <span className="bg-primary">mot-clé</span>
        <p className="text-primary">la métacatégorie mot-clé</p>
        </div>
        <div>
        <span className="bg-primary">commentaire</span>
        <p className="text-primary">la métacatégorie commentaire</p>
        </div>
        <div>
        <span className="bg-primary">trouble</span>
        <p className="text-primary">la métacatégorie trouble</p>
        </div>
      </div>
    );
  }
}