import { ChevronIcon } from '../ui/icons';
import { LightbulbIcon } from '../ui/icons/LightbulbIcon';

interface AISummaryCardProps {
  summary?: string;
  loading?: boolean;
  error?: string | null;
  expanded: boolean;
  onToggleExpanded: () => void;
}

export default function AISummaryCard({
  summary,
  loading,
  error,
  expanded,
  onToggleExpanded,
}: AISummaryCardProps) {
  if (!summary && !loading && !error) return null;

  return (
    <div className="px-3 pt-3 pb-1">
      <div className="bg-teal-50 dark:bg-teal-900/20 border border-teal-200 dark:border-teal-800/50 rounded p-2.5">
        <button
          onClick={onToggleExpanded}
          className="w-full flex items-center justify-between gap-1.5 mb-1.5"
        >
          <div className="flex items-center gap-1.5">
            <LightbulbIcon className="w-3.5 h-3.5 text-teal-600 dark:text-teal-400" />
            <span className="text-xs font-semibold text-teal-700 dark:text-teal-400">
              AI Summary
            </span>
          </div>
          <ChevronIcon
            direction={expanded ? 'down' : 'right'}
            className="w-3.5 h-3.5 text-teal-600 dark:text-teal-400"
          />
        </button>
        {expanded && (
          <>
            {error ? (
              <div className="text-xs text-warm-600 dark:text-warm-400">
                Failed to generate summary.
              </div>
            ) : loading ? (
              <div className="space-y-1.5">
                <div className="h-3 bg-teal-200/60 dark:bg-teal-800/40 rounded animate-pulse w-full" />
                <div className="h-3 bg-teal-200/60 dark:bg-teal-800/40 rounded animate-pulse w-4/5" />
              </div>
            ) : (
              <p className="text-xs text-warm-700 dark:text-warm-300 leading-relaxed">{summary}</p>
            )}
          </>
        )}
      </div>
    </div>
  );
}