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>

    );

  }

}