interface NewsEntry {
  id: string;
  title: string;
  rewrittenSummary: string | null;
  sourceName: string;
  sourceUrl: string;
  publishedAt: Date;
}

export function LatestUpdates({ items }: { items: NewsEntry[] }) {
  if (items.length === 0) return null;

  return (
    <section aria-labelledby="updates-heading">
      <h2 id="updates-heading" className="stat-label mb-3 !text-signal">
        Latest Updates
      </h2>
      <ol className="space-y-3">
        {items.map((item) => (
          <li key={item.id} className="hud-panel-sm flex items-start gap-4 p-4">
            <time
              dateTime={item.publishedAt.toISOString()}
              className="stat-label shrink-0 !text-[10px] leading-tight"
            >
              {item.publishedAt.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
            </time>
            <div>
              <p className="prose-content">{item.rewrittenSummary ?? item.title}</p>
              <a
                href={item.sourceUrl}
                target="_blank"
                rel="noopener noreferrer nofollow"
                className="mt-1 inline-block font-mono text-xs text-haze hover:text-signal"
              >
                Source: {item.sourceName} ↗
              </a>
            </div>
          </li>
        ))}
      </ol>
    </section>
  );
}
