PocketVeto/frontend/components/shared/BillCard.tsx

import Link from "next/link";
import { TrendingUp, Calendar, User, FileText, FileClock, FileX, Tag } from "lucide-react";
import { Bill } from "@/lib/types";
import { billLabel, chamberBadgeColor, cn, formatDate, partyBadgeColor, trendColor } from "@/lib/utils";
import { FollowButton } from "./FollowButton";

interface BillCardProps {
  bill: Bill;
  compact?: boolean;
}

export function BillCard({ bill, compact = false }: BillCardProps) {
  const label = billLabel(bill.bill_type, bill.bill_number);
  const score = bill.latest_trend?.composite_score;
  const tags = bill.latest_brief?.topic_tags?.slice(0, 3) || [];

  return (
    <div className="bg-card border border-border rounded-lg p-4 hover:border-primary/30 transition-colors">
      <div className="flex items-start justify-between gap-3">
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 mb-1.5 flex-wrap">
            <span className="text-xs font-mono font-semibold text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
              {label}
            </span>
            {bill.chamber && (
              <span className={cn("text-xs px-1.5 py-0.5 rounded font-medium", chamberBadgeColor(bill.chamber))}>
                {bill.chamber}
              </span>
            )}
            {tags.map((tag) => (
              <Link
                key={tag}
                href={`/bills?topic=${tag}`}
                onClick={(e) => e.stopPropagation()}
                className="inline-flex items-center gap-0.5 text-xs px-1.5 py-0.5 rounded-full bg-accent text-accent-foreground hover:bg-accent/70 transition-colors"
              >
                <Tag className="w-2.5 h-2.5" />
                {tag}
              </Link>
            ))}
          </div>

          <Link href={`/bills/${bill.bill_id}`}>
            <h3 className="text-sm font-medium leading-snug hover:text-primary transition-colors line-clamp-2">
              {bill.short_title || bill.title || "Untitled Bill"}
            </h3>
          </Link>

          {!compact && bill.sponsor && (
            <div className="flex items-center gap-1.5 mt-1.5 text-xs text-muted-foreground">
              <User className="w-3 h-3" />
              <Link href={`/members/${bill.sponsor.bioguide_id}`} className="hover:text-foreground transition-colors">
                {bill.sponsor.name}
              </Link>
              {bill.sponsor.party && (
                <span className={cn("px-1 py-0.5 rounded text-xs font-medium", partyBadgeColor(bill.sponsor.party))}>
                  {bill.sponsor.party}
                </span>
              )}
              {bill.sponsor.state && (
                <span>{bill.sponsor.state}</span>
              )}
            </div>
          )}
        </div>

        <div className="flex flex-col items-end gap-2 shrink-0">
          <FollowButton type="bill" value={bill.bill_id} supportsModes />
          {score !== undefined && score > 0 && (
            <div className={cn("flex items-center gap-1 text-xs font-medium", trendColor(score))}>
              <TrendingUp className="w-3 h-3" />
              {Math.round(score)}
            </div>
          )}
          {bill.latest_brief ? (
            <div className="flex items-center gap-1 text-xs text-emerald-600 dark:text-emerald-400" title="Analysis available">
              <FileText className="w-3 h-3" />
              <span>Brief</span>
            </div>
          ) : bill.has_document ? (
            <div className="flex items-center gap-1 text-xs text-amber-500" title="Text retrieved, analysis pending">
              <FileClock className="w-3 h-3" />
              <span>Pending</span>
            </div>
          ) : (
            <div className="flex items-center gap-1 text-xs text-muted-foreground/50" title="No bill text published">
              <FileX className="w-3 h-3" />
              <span>No text</span>
            </div>
          )}
        </div>
      </div>

      {!compact && bill.latest_action_text && (
        <p className="mt-2 text-xs text-muted-foreground line-clamp-2 border-t border-border pt-2">
          <Calendar className="w-3 h-3 inline mr-1" />
          {formatDate(bill.latest_action_date)} — {bill.latest_action_text}
        </p>
      )}
    </div>
  );
}