frontend/src/components/SignalsPanel.tsx

import type { NegativeSignal } from "@/types/api";

export function SignalsPanel({ rows }: { rows: NegativeSignal[] }) {
  return (
    <div className="panel">
      <div className="px-4 py-3 border-b border-border flex items-center justify-between">
        <div className="heading">Negative issuer signals</div>
        <div className="text-xs text-muted">{rows.length}</div>
      </div>
      <ul>
        {rows.length === 0 && (
          <li className="px-4 py-6 text-sm text-muted">No negative issuer signals.</li>
        )}
        {rows.map((r) => (
          <li
            key={r.issuer_id}
            className="px-4 py-3 border-t border-border first:border-t-0 flex items-center gap-3"
          >
            <div className="h-8 w-8 rounded-md bg-panel2 border border-border grid place-items-center text-[11px] num text-muted">
              {r.ticker ?? "·"}
            </div>
            <div className="flex-1 min-w-0">
              <div className="text-sm truncate">{r.issuer_name}</div>
              <div className="mt-0.5 flex flex-wrap gap-1">
                {r.tags.slice(0, 3).map((t) => (
                  <span key={t} className="chip !text-[10px]">
                    {t}
                  </span>
                ))}
              </div>
            </div>
            <div className="text-right">
              <div className="num text-negative text-sm">{r.score.toFixed(2)}</div>
              <div className="text-[10px] text-muted">signal</div>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}