frontend/src/components/SummaryCard.jsx

import { formatFeature } from "../utils/formatters";

export function SummaryCard({ summary, uncertaintyDrivers, summaryProvider, fallbackUsed }) {
  const formattedDrivers = uncertaintyDrivers.map(formatFeature).join(", ");

  return (
    <div className="card">
      <h2>Summary</h2>
      <p className="summary-text">{summary}</p>
      <div className="summary-meta">
        <p className="summary-provider">
          Summary source: <strong>{summaryProvider}</strong>
          {fallbackUsed && <span className="fallback-badge">Fallback</span>}
        </p>
        <p className="drivers">Primary uncertainty drivers: {formattedDrivers}</p>
      </div>
    </div>
  );
}