tsx
import React from 'react'
import { useAppStore } from '@/store/useAppStore'
import { AlertTriangle, RefreshCw, X } from 'lucide-react'

/**
 * Component for displaying error messages with retry functionality
 */
export function ErrorMessage() {
  const { error, clearError, retryOptimization } = useAppStore()

  if (!error) return null

  return (
    <div className="card p-6 border-red-200 dark:border-red-800">
      <div className="flex items-start space-x-4">
        {/* Error Icon */}
        <div className="w-10 h-10 bg-red-100 dark:bg-red-900 rounded-lg flex items-center justify-center flex-shrink-0">
          <AlertTriangle className="w-6 h-6 text-red-600 dark:text-red-400" />
        </div>

        {/* Error Content */}
        <div className="flex-1">
          <h3 className="text-lg font-semibold text-red-900 dark:text-red-100 mb-2">
            Fehler bei der Optimierung
          </h3>
          <p className="text-red-700 dark:text-red-300 mb-4">
            {error}
          </p>

          {/* Error Categories */}
          <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-4">
            <h4 className="text-sm font-medium text-red-900 dark:text-red-100 mb-2">
              Häufige Ursachen:
            </h4>
            <ul className="text-sm text-red-700 dark:text-red-300 space-y-1">
              <li>• Netzwerkverbindung unterbrochen</li>
              <li>• KI-Service vorübergehend nicht verfügbar</li>
              <li>• Prompt zu komplex oder ungültig</li>
              <li>• Browser-Sicherheitseinstellungen blockieren Anfragen</li>
            </ul>
          </div>

          {/* Action Buttons */}
          <div className="flex flex-col sm:flex-row gap-3">
            <button
              onClick={retryOptimization}
              className="flex-1 btn-primary flex items-center justify-center space-x-2"
            >
              <RefreshCw className="w-4 h-4" />
              <span>Erneut versuchen</span>
            </button>
            
            <button
              onClick={clearError}
              className="btn-secondary flex items-center justify-center space-x-2 px-4"
            >
              <X className="w-4 h-4" />
              <span>Schließen</span>
            </button>
          </div>

          {/* Help Text */}
          <div className="mt-4 text-xs text-red-600 dark:text-red-400">
            <p>
              Falls das Problem besteht, versuche folgendes:
            </p>
            <ul className="list-disc list-inside mt-1 space-y-1">
              <li>Aktualisiere die Seite (F5)</li>
              <li>Deaktiviere temporär Browser-Erweiterungen</li>
              <li>Überprüfe deine Internetverbindung</li>
              <li>Reduziere die Prompt-Länge</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  )
}

</html>