frontend/src/components/ComparablesTable.tsx

import type { ComparableOut } from "@/types/api";
import { Link } from "react-router-dom";

export function ComparablesTable({ rows }: { rows: ComparableOut[] }) {
  return (
    <div className="panel">
      <div className="px-4 py-3 border-b border-border flex items-center justify-between">
        <div className="heading">Comparables · similarity-weighted peers</div>
        <div className="text-xs text-muted">{rows.length}</div>
      </div>
      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr className="text-[11px] uppercase tracking-wider text-muted">
              <th className="text-left font-medium px-4 py-2">Issuer</th>
              <th className="text-left font-medium px-2 py-2">Bond</th>
              <th className="text-left font-medium px-2 py-2">Rating</th>
              <th className="text-right font-medium px-2 py-2">Coupon</th>
              <th className="text-left font-medium px-2 py-2">Maturity</th>
              <th className="text-right font-medium px-2 py-2">Peer spread</th>
              <th className="text-right font-medium px-2 py-2">Δ vs target</th>
              <th className="text-right font-medium px-4 py-2">Similarity</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r) => {
              const simBar = Math.max(0, Math.min(1, r.similarity));
              return (
                <tr key={r.bond_id} className="border-t border-border hover:bg-panel2/60">
                  <td className="px-4 py-2.5 truncate max-w-[180px]">{r.issuer_name}</td>
                  <td className="px-2 py-2.5 num text-muted">
                    <Link to={`/bonds/${r.bond_id}`} className="hover:text-accent">
                      {r.bond_id.slice(-10)}
                    </Link>
                  </td>
                  <td className="px-2 py-2.5 num text-muted">{r.rating ?? "—"}</td>
                  <td className="px-2 py-2.5 num text-right">{r.coupon.toFixed(3)}</td>
                  <td className="px-2 py-2.5 num text-muted">{r.maturity}</td>
                  <td className="px-2 py-2.5 num text-right">{r.peer_spread_bps.toFixed(1)}</td>
                  <td className="px-2 py-2.5 num text-right text-muted">
                    {r.distance_bps.toFixed(1)}
                  </td>
                  <td className="px-4 py-2.5 num text-right">
                    <div className="flex items-center gap-2 justify-end">
                      <div className="relative h-1.5 w-14 rounded bg-panel2 overflow-hidden">
                        <div
                          className="absolute top-0 bottom-0 left-0 bg-accent"
                          style={{ width: `${simBar * 100}%` }}
                        />
                      </div>
                      <span>{r.similarity.toFixed(2)}</span>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}