const DirtyNavigationDialog = ({ open, message, onSave, onDiscard, onCancel, saving }) => {
  if (!open) {
    return null;
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 px-4">
      <div className="bg-white rounded-lg shadow-2xl max-w-md w-full p-6">
        <h3 className="text-lg font-semibold text-gray-800 mb-2">Änderungen nicht gespeichert</h3>
        <p className="text-sm text-gray-600 mb-4">
          {message || 'Es gibt ungespeicherte Änderungen. Wie möchtest du fortfahren?'}
        </p>
        <div className="flex flex-col gap-2">
          <button
            onClick={onSave}
            disabled={saving}
            className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-70"
          >
            {saving ? 'Speichere...' : 'Speichern & fortfahren'}
          </button>
          <button
            onClick={onDiscard}
            className="bg-white border border-gray-300 hover:bg-gray-50 text-gray-800 px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-gray-400"
          >
            Ohne Speichern fortfahren
          </button>
          <button
            onClick={onCancel}
            className="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-gray-300"
          >
            Abbrechen
          </button>
        </div>
      </div>
    </div>
  );
};

export default DirtyNavigationDialog;