import type { ReactNode } from 'react'
import { AttentionRow } from './AttentionRow'

export interface AttentionItem {
  id: string
  severity: 'critical' | 'action' | 'info'
  title: string
  sub?: string
  detail: ReactNode
  actions: Array<
    | { label: string; kind?: 'primary' | 'ghost'; href: string; onClick?: never }
    | { label: string; kind?: 'primary' | 'ghost'; onClick(): void; href?: never }
  >
}

export function AttentionPanel(props: { items: AttentionItem[] }) {
  return (
    <section aria-labelledby="run-attention-title" className="min-w-0 rounded-xl border border-border bg-surface">
      <header className="flex items-baseline gap-3 border-b border-border px-5 py-4">
        <h2 id="run-attention-title" className="text-base font-semibold text-fg">
          Needs you
        </h2>
        <span className="text-xs text-fg-muted">
          only genuinely actionable items — everything else self-drives
        </span>
      </header>
      {props.items.length === 0 ? (
        <p className="px-5 py-4 text-sm text-fg-muted">
          Nothing needs you right now. New decisions, failures, or stalls appear here when reported.
        </p>
      ) : (
        <div
          role="list"
          className="grid grid-cols-[4px_minmax(0,1fr)] lg:grid-cols-[4px_minmax(0,1.2fr)_minmax(0,1.6fr)_minmax(0,0.9fr)]"
        >
          {props.items.map((item) => (
            <AttentionRow key={item.id} item={item} />
          ))}
        </div>
      )}
    </section>
  )
}