import React from 'react'
import { ILatest } from '../interfaces/ILatest'
import Button from './Button'

export default function LatestList({
  latest,
  onSelect,
  onRemove,
}: {
  latest: ILatest[]
  onSelect: (l: ILatest) => void
  onRemove: (l: ILatest) => void
}) {
  if (!latest || !latest.length) {
    return null
  }
  const latestElements = latest.map((item) => {
    const created = new Date(item.created)
    const subject = item.subject
    const hrefId = `#item-${item.id}`
    return (
      <li key={item.id}>
        <a href={hrefId} onClick={() => onSelect(item)}>
          <div>{subject}</div>
          <div>{created.toLocaleDateString()}</div>
        </a>
        <Button onClick={() => onRemove(item)}>Remove</Button>
      </li>
    )
  })

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