interface SummaryDisplayProps {
  summary: string | null;
  isLoading: boolean;
  progress?: number;
}

import { ProgressBar } from "./ProgressBar";

export function SummaryDisplay({ summary, isLoading, progress }: SummaryDisplayProps) {
  return (
    <div className="summary-display">
      <div className="summary-header">
        <h2>Meeting Summary</h2>
      </div>
      <div className="summary-content">
        {isLoading ? (
          <div className="loading">
            {progress !== undefined ? (
              <ProgressBar
                progress={progress}
                label="Generating summary..."
              />
            ) : (
              <>
                <div className="spinner"></div>
                <p>Generating summary...</p>
              </>
            )}
          </div>
        ) : summary ? (
          <div className="summary-text">{summary}</div>
        ) : (
          <p className="empty-state">Summary will appear here after recording is complete.</p>
        )}
      </div>
    </div>
  );
}
