import React from 'react'
import Button from './Button'

export default function (props) {
  const latest = props.latest || []
  const latestElements = latest.map((item) => {
    const created = new Date(item.created)
    const hrefId = `#item-${item.id}`
    return (
      <li key={item.id}>
        <a href={hrefId} onClick={() => props.onSelect(item)}>
          {created.toLocaleString()}
        </a>
        <span> </span>
        <Button onClick={() => props.onRemove(item)}>Remove</Button>
      </li>
    )
  })

  return (
    <div>
      <h4>Vergangene Briefe:</h4>
      <ul>{latestElements}</ul>
    </div>
  )
}