PocketVeto/frontend/components/bills/NewsPanel.tsx

import { ExternalLink, Newspaper } from "lucide-react";
import { formatDate } from "@/lib/utils";

interface ArticleLike {
  id: number;
  source?: string;
  headline?: string;
  url?: string;
  published_at?: string;
}

interface NewsPanelProps {
  articles?: ArticleLike[];
}

export function NewsPanel({ articles }: NewsPanelProps) {
  return (
    <div className="bg-card border border-border rounded-lg p-4">
      <h3 className="font-semibold text-sm flex items-center gap-2 mb-3">
        <Newspaper className="w-4 h-4" />
        Related News
        {articles && articles.length > 0 && (
          <span className="text-xs text-muted-foreground font-normal">({articles.length})</span>
        )}
      </h3>

      {!articles || articles.length === 0 ? (
        <p className="text-xs text-muted-foreground italic">No news articles found yet.</p>
      ) : (
        <ul className="space-y-3">
          {articles.slice(0, 8).map((article) => (
            <li key={article.id} className="group">
              <a
                href={article.url}
                target="_blank"
                rel="noopener noreferrer"
                className="block hover:text-primary transition-colors"
              >
                <p className="text-xs font-medium line-clamp-2 leading-snug group-hover:underline">
                  {article.headline}
                  <ExternalLink className="w-3 h-3 inline ml-1 opacity-50" />
                </p>
                <p className="text-xs text-muted-foreground mt-0.5">
                  {article.source} · {formatDate(article.published_at)}
                </p>
              </a>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}