frontend/src/components/CandidateDetail.tsx

import { RankedCandidate } from "../api";

export function CandidateDetail({ candidate }: { candidate: RankedCandidate }) {
  const metrics = Object.entries(candidate.metrics);

  return (
    <article className="candidate-detail">
      <div className="results-heading">
        <div>
          <span className="eyebrow">Lead profile</span>
          <h3>Candidate {candidate.rank}</h3>
        </div>
        <span className="count-chip">score {candidate.score}</span>
      </div>
      <p className="mono">{candidate.canonical_smiles}</p>
      <dl>
        <div>
          <dt>Score</dt>
          <dd>{candidate.score}</dd>
        </div>
        <div>
          <dt>Similarity</dt>
          <dd>{candidate.similarity}</dd>
        </div>
      </dl>
      <p>{candidate.recommendation}</p>
      {metrics.length > 0 && (
        <table>
          <thead>
            <tr>
              <th>Metric</th>
              <th>Value</th>
            </tr>
          </thead>
          <tbody>
            {metrics.map(([name, value]) => (
              <tr key={name}>
                <td>{name}</td>
                <td>{value}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </article>
  );
}