import { FileText } from "lucide-react";

interface CompletedStateProps {
  isGeneratingReport: boolean;
  chatType?: "medical" | "psychological";
}

export const CompletedState = ({ isGeneratingReport, chatType = "medical" }: CompletedStateProps) => {
  const reportType = chatType === "psychological" ? "Reporte Psicológico" : "Reporte Médico";
  
  return (
    <div className="text-center py-12">
      <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
        {isGeneratingReport ? (
          <div className="w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
        ) : (
          <FileText className="w-8 h-8 text-primary" />
        )}
      </div>
      <h3 className="text-xl font-semibold text-foreground mb-2">
        {isGeneratingReport
          ? `Generando ${reportType}`
          : "Consulta Completada"}
      </h3>
      <p className="text-muted-foreground">
        {isGeneratingReport
          ? `Estamos procesando tu consulta y generando un ${reportType.toLowerCase()} personalizado.`
          : `Tu consulta ha sido completada. El ${reportType.toLowerCase()} ha sido generado y guardado.`}
      </p>
    </div>
  );
};