import React from 'react'
import { IStoreItem } from '../interfaces/IStoreItem'

export default function LatestList({
  storeData,
  onSelect,
  onRemove,
}: {
  storeData: IStoreItem[]
  onSelect: (l: IStoreItem) => void
  onRemove: (l: IStoreItem) => void
}) {
  if (!storeData || !storeData.length) {
    return null
  }
  const latestElements = storeData.map((item) => {
    const created = new Date(item.created)
    const subject = item.subject
    const hrefId = `#item-${item.id}`
    return (
      <li key={item.id} className="flex flex-col">
        <hr className="border-gray-200 mt-3 mb-4" />
        <div className="flex flex-row items-center">
          <a href={hrefId} onClick={() => onSelect(item)}>
            <div className="text-base">{subject}</div>
            <div className="text-sm">{created.toLocaleString()}</div>
          </a>
          <a
            className="m-2 text-gray-400 hover:text-gray-600 cursor-pointer"
            onClick={() => onRemove(item)}
            href="#"
            title="Löschen"
          >
            ❌
          </a>
        </div>
      </li>
    )
  })

  return (
    <div>
      <h4 className="text-lg mb-4">Vergangene Briefe:</h4>
      <ul>{latestElements}</ul>
    </div>
  )
}