// components/pois/AddPoiModalWindowWrapper.js
import React from "react";
import AddPoiModalWindow from "./AddPoiModalWindow";

const AddPoiModalWindowWrapper = ({ show, onClose, latlng, handleAddStation }) => {
  return (
    show && (
      <div
        className="fixed inset-0 bg-black bg-opacity-10 flex justify-center items-center z-[1000]"
        onClick={onClose}
        data-testid="modal-overlay" // Hinzugefügt, um den Hintergrund zu identifizieren
      >
        <div
          className="relative bg-white p-6 rounded-lg shadow-lg"
          onClick={(e) => e.stopPropagation()}
          role="dialog" // Hinzugefügt, um das Dialog-Element zu identifizieren
        >
          <button onClick={onClose} className="absolute top-0 right-0 mt-2 mr-2 p-1 text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-600" aria-label="Close">
            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
          <AddPoiModalWindow onClose={onClose} onSubmit={handleAddStation} latlng={latlng} />
        </div>
      </div>
    )
  );
};

export default AddPoiModalWindowWrapper;