im-amrith/crisp

1import React from 'react';2import { AlertCircle, X, RefreshCw } from 'lucide-react';3 4interface ErrorMessageProps {5  message: string;6  onDismiss: () => void;7  onRetry?: () => void;8}9 10export const ErrorMessage: React.FC<ErrorMessageProps> = ({ 11  message, 12  onDismiss, 13  onRetry 14}) => {15  return (16    <div className="max-w-4xl mx-auto mb-6">17      <div className="bg-red-50 border border-red-200 rounded-xl p-4">18        <div className="flex items-start">19          <AlertCircle className="h-5 w-5 text-red-500 mt-0.5 mr-3 flex-shrink-0" />20          <div className="flex-1">21            <h3 className="text-sm font-semibold text-red-800 mb-1">22              Analysis Failed23            </h3>24            <p className="text-sm text-red-700">25              {message}26            </p>27            {message.includes('Failed to analyze gene') && (28              <div className="mt-3 text-xs text-red-600">29                <p>Possible causes:</p>30                <ul className="list-disc list-inside mt-1 space-y-1">31                  <li>Flask backend server is not running (start with: python app.py)</li>32                  <li>API server is not accessible at http://localhost:5000</li>33                  <li>Crop or trait combination is not supported</li>34                  <li>Network connectivity issues</li>35                </ul>36              </div>37            )}38          </div>39          <div className="flex items-center space-x-2 ml-3">40            {onRetry && (41              <button42                onClick={onRetry}43                className="p-1 text-red-500 hover:text-red-700 transition-colors duration-200"44                title="Retry connection"45              >46                <RefreshCw className="h-4 w-4" />47              </button>48            )}49            <button50              onClick={onDismiss}51              className="p-1 text-red-500 hover:text-red-700 transition-colors duration-200"52              title="Dismiss"53            >54              <X className="h-4 w-4" />55            </button>56          </div>57        </div>58      </div>59    </div>60  );61};62