import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import "leaflet/dist/leaflet.css"; // Leaflet CSS
import React from "react";

const points = [
    { id: 1, name: "Point A", position: [51.505, -0.09] },
    { id: 2, name: "Point B", position: [51.515, -0.1] },
    { id: 3, name: "Point C", position: [51.525, -0.11] },
];

const InteractiveMap = () => {
    return (
        <div className="w-full h-96 flex justify-center items-center">
            <MapContainer
                center={[51.505, -0.09]} // Default map center
                zoom={13}                // Zoom level
                style={{ height: "100%", width: "100%" }}
                className="rounded-lg shadow-lg"
            >
                {/* Tile Layer for map background */}
                <TileLayer
                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />

                {/* Add markers for points */}
                {points.map((point) => (
                    <Marker key={point.id} position={point.position}>
                        {/* Popup when marker is clicked */}
                        <Popup>{point.name}</Popup>
                        {/* Optional hover tooltip */}
                    </Marker>
                ))}
            </MapContainer>
        </div>
    );
};

export default InteractiveMap;