import React from 'react';
import { ListGroup, ListGroupItem } from 'react-bootstrap';
import _ from 'lodash';
import '../App.css';
import {formatTimestamp} from '../utils';

const SessionSummary = ({notes}) => (
  <ListGroup>
    {notes.map((note) =>
      <ListGroupItem key={note.get('_id')}>
        <a href={'#note-' + note.get('_id')}>
          <span className="text-muted">{formatTimestamp(note.startedAt)} → {formatTimestamp(note.finishedAt)}</span>
          <span className="pull-right">{_.words(note.plain).length} words</span>
        </a>
      </ListGroupItem>
    )}
  </ListGroup>
)

export default SessionSummary;