// components/CoordinatePopup.js
import React from "react";

const CoordinatePopup = ({ isOpen, coordinates, onClose }) => {
  if (!isOpen) return null;

  return (
    <div
      className="fixed inset-0 bg-black bg-opacity-30 flex justify-center z-50"
      onClick={onClose} // Schließt das Popup, wenn der Hintergrund angeklickt wird
      style={{
        alignItems: "flex-start", // Positioniert das Popup oben
        paddingTop: "5px", // Abstand von oben
      }}
    >
      <div
        className="bg-white p-4 rounded-lg shadow-xl"
        style={{
          width: "300px",
        }}
        onClick={(e) => e.stopPropagation()} // Verhindert das Schließen, wenn innerhalb des Popups geklickt wird
      >
        <h2 className="text-xl font-bold text-center mb-4 text-gray-800">Koordinaten</h2>
        <p className="text-center text-lg text-gray-600 font-mono mb-6">{coordinates}</p>
        <div className="flex justify-center gap-4">
          <button
            onClick={() => {
              navigator.clipboard.writeText(coordinates);
              alert("Koordinaten kopiert!");
            }}
            className="bg-blue-500 text-white px-6 py-2 rounded-lg shadow hover:bg-blue-600 transition-all"
          >
            Kopieren
          </button>
          <button onClick={onClose} className="bg-gray-300 text-gray-800 px-6 py-2 rounded-lg shadow hover:bg-gray-400 transition-all">
            Schließen
          </button>
        </div>
      </div>
    </div>
  );
};

export default CoordinatePopup;