import { InboxItem, SectionCard } from '@overdeck/deck-ui'
import type { Item } from '../../lib/collector-types'
import { inboxItemPropsFor, topNeedsYouNow } from '../../lib/overview-mappers'

export interface NeedsYouNowCardProps {
  items: Item[]
}

/** Top-4 items by severity (act > warn > info) then most-recent first. */
export function NeedsYouNowCard({ items }: NeedsYouNowCardProps) {
  const top = topNeedsYouNow(items)
  return (
    <SectionCard title="Needs you now" action={{ label: `open inbox (${items.length}) →`, href: '/inbox' }}>
      {top.map((item, i) => (
        <InboxItem key={item.id} {...inboxItemPropsFor(item, i === top.length - 1)} />
      ))}
    </SectionCard>
  )
}