import {AlertCircle, X} from "lucide-react";

type ErrorPopupProps = {
    message: string;
    onClose: () => void;
};

/**
 * ErrorPopup - Displays error messages in a modal overlay
 */
export default function ErrorPopup({message, onClose}: ErrorPopupProps) {
    return (
        <div className="fixed inset-0 flex items-center justify-center bg-black/40 z-50">
            <div className="bg-white rounded-lg p-6 w-96 shadow-lg">
                <div className="flex items-start justify-between mb-4">
                    <div className="flex items-center gap-3">
                        <AlertCircle className="text-red-600" size={24}/>
                        <h3 className="text-lg font-semibold text-red-600">Fehler</h3>
                    </div>
                    <button
                        onClick={onClose}
                        className="text-gray-400 hover:text-gray-600 transition-colors"
                    >
                        <X size={20}/>
                    </button>
                </div>

                <p className="text-gray-700 mb-4">{message}</p>

                <div className="flex justify-end">
                    <button
                        onClick={onClose}
                        className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors"
                    >
                        Schließen
                    </button>
                </div>
            </div>
        </div>
    );
}