'use client';

import type { SummaryDisplayProps } from '@/types/component-props';

export default function SummaryDisplay({
  summary,
  isLoading = false,
}: SummaryDisplayProps) {
  return (
    <div className="bg-blue-50 border border-blue-200 rounded-lg p-6">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">AI Summary</h3>
      {isLoading ? (
        <div className="flex items-center gap-2 text-gray-600">
          <div className="w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
          <span>Generating summary...</span>
        </div>
      ) : (
        <div className="prose max-w-none text-gray-700">
          {summary || (
            <p className="text-gray-400 italic">No summary available yet.</p>
          )}
        </div>
      )}
    </div>
  );
}