import { Link } from 'react-router-dom'
import { loadRecentObjects } from '../utils/recentObjects.js'

const TYPE_LABELS = {
  action: 'AP',
  project: 'Projekt',
  gate: 'Gate',
  initiative: 'Vorhaben',
}

export function RecentlyOpened() {
  const items = loadRecentObjects().slice(0, 5)
  if (items.length === 0) return null

  return (
    <div className="recently-opened" aria-label="Zuletzt geöffnet">
      <span className="recently-opened__label">Zuletzt</span>
      <div className="recently-opened__items">
        {items.map((item) => (
          <Link
            key={`${item.type}-${item.id}`}
            to={item.href}
            className="recently-opened__chip"
            title={item.title}
          >
            <span className="recently-opened__type">{TYPE_LABELS[item.type] || item.type}</span>
            <span className="recently-opened__title">{item.title}</span>
          </Link>
        ))}
      </div>
    </div>
  )
}