frontend/src/components/CandidateCard.tsx

import { CandidateCardData } from "@/lib/types";

type CandidateCardProps = {
  card: CandidateCardData;
  onAction?: (actionMessage: string, actionLabel: string) => void;
};

export function CandidateCard({ card, onAction }: CandidateCardProps) {
  const tags = Array.isArray(card.tags) ? card.tags : [];
  const actions = Array.isArray(card.actions) ? card.actions : [];

  return (
    <article className="candidate-card">
      <h4>{card.title}</h4>
      {card.subtitle ? <p className="candidate-meta">{card.subtitle}</p> : null}

      {tags.length ? (
        <div className="tag-list">
          {tags.map((tag) => (
            <span key={tag} className="tag">
              {tag}
            </span>
          ))}
        </div>
      ) : null}

      {card.meta ? (
        <p className="candidate-meta" style={{ marginTop: 8 }}>
          {Object.entries(card.meta)
            .filter(([, value]) => value !== null && value !== undefined && value !== "")
            .map(([key, value]) => `${key}: ${String(value)}`)
            .join(" | ")}
        </p>
      ) : null}

      {actions.length ? (
        <div className="action-row">
          {actions.slice(0, 2).map((action) => (
            <button
              key={`${action.label}-${action.action}`}
              type="button"
              onClick={() => onAction?.(action.action, action.label)}
            >
              {action.label}
            </button>
          ))}
        </div>
      ) : null}
    </article>
  );
}