import { Marker, Popup, useMapEvents } from "react-leaflet"

const LocationMarker = ({ address, position, setPosition }) => {

    const map = useMapEvents({
        dragend: () => {
            setPosition(map.getCenter())
        },
        zoomend: () => {
            setPosition(map.getCenter())
        },
        resize: () => {
            setPosition(map.getCenter())
        }
    })

    return (
        <Marker position={position}>
            <Popup>
                {address}
                {position.lat.toFixed(4)}, {position.lng.toFixed(4)}
            </Popup>
        </Marker>
    )
}

export default LocationMarker