src/components/FactCheckAlert.tsx

import React, { useState } from 'react';
import { AlertTriangle, ChevronDown, ChevronRight, CheckCircle } from 'lucide-react';
import { cn } from "@/lib/utils";

interface FactCheckAlertProps {
  issues: string[];
}

export const FactCheckAlert: React.FC<FactCheckAlertProps> = ({ issues }) => {
  const [isExpanded, setIsExpanded] = useState(false);

  if (!issues || issues.length === 0) return null;

  return (
    <div className="mb-6 rounded-xl border border-amber-200 bg-amber-50 dark:bg-amber-950/30 dark:border-amber-900/50 overflow-hidden">
      <div 
        className="p-4 flex items-start gap-3 cursor-pointer hover:bg-amber-100/50 dark:hover:bg-amber-900/20 transition-colors"
        onClick={() => setIsExpanded(!isExpanded)}
      >
        <AlertTriangle className="h-5 w-5 text-amber-600 dark:text-amber-500 flex-shrink-0 mt-0.5" />
        <div className="flex-1">
          <div className="flex items-center justify-between">
            <h3 className="text-sm font-semibold text-amber-900 dark:text-amber-100">
              Potential Inaccuracies Detected
            </h3>
            {isExpanded ? (
              <ChevronDown className="h-4 w-4 text-amber-700 dark:text-amber-400" />
            ) : (
              <ChevronRight className="h-4 w-4 text-amber-700 dark:text-amber-400" />
            )}
          </div>
          <p className="text-sm text-amber-800 dark:text-amber-200 mt-1">
            Our fact-checking system flagged {issues.length} potential issue{issues.length > 1 ? 's' : ''} in this response.
          </p>
        </div>
      </div>

      {isExpanded && (
        <div className="px-4 pb-4 pt-0 border-t border-amber-200/50 dark:border-amber-900/30">
          <div className="mt-3 space-y-2">
            {issues.map((issue, idx) => (
              <div key={idx} className="flex items-start gap-2 text-sm text-amber-900 dark:text-amber-100 bg-white/50 dark:bg-black/20 p-2 rounded-md">
                <span className="font-mono text-xs font-bold text-amber-600 dark:text-amber-500 mt-0.5">
                  {idx + 1}.
                </span>
                <span>{issue}</span>
              </div>
            ))}
          </div>
          <div className="mt-3 text-xs text-amber-700 dark:text-amber-400 flex items-center gap-1">
            <CheckCircle className="h-3 w-3" />
            <span>Please verify with official sources.</span>
          </div>
        </div>
      )}
    </div>
  );
};