import { X, FileText } from "lucide-react";
import { Button } from "@/components/ui/button";

interface CompletedBannerProps {
  isGeneratingReport: boolean;
  chatType?: "medical" | "psychological";
  onDismiss: () => void;
}

export const CompletedBanner = ({ isGeneratingReport, chatType = "medical", onDismiss }: CompletedBannerProps) => {
  const reportType = chatType === "psychological" ? "Reporte Psicológico" : "Reporte Médico";
  
  return (
    <div className="bg-success/10 border border-success/20 rounded-lg p-4 mb-4 relative">
      <Button
        variant="ghost"
        size="sm"
        className="absolute top-2 right-2 h-6 w-6 p-0 hover:bg-background/50"
        onClick={onDismiss}
      >
        <X className="w-4 h-4" />
      </Button>
      
      <div className="flex items-center space-x-3 pr-8">
        <div className="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
          {isGeneratingReport ? (
            <div className="w-5 h-5 border-2 border-primary border-t-transparent rounded-full animate-spin"></div>
          ) : (
            <FileText className="w-5 h-5 text-primary" />
          )}
        </div>
        
        <div className="flex-1">
          <h3 className="font-semibold text-foreground text-sm">
            {isGeneratingReport
              ? `Generando ${reportType}`
              : "Consulta Completada"}
          </h3>
          <p className="text-muted-foreground text-xs mt-1">
            {isGeneratingReport
              ? `Estamos procesando tu consulta y generando un ${reportType.toLowerCase()} personalizado.`
              : `Tu consulta ha sido completada. El ${reportType.toLowerCase()} ha sido generado y guardado. Puedes revisar la conversación abajo.`}
          </p>
        </div>
      </div>
    </div>
  );
};