import 'leaflet/dist/leaflet.css';
import leaflet from 'leaflet';
import { useEffect, useRef } from 'preact/hooks';

export const MapComponent = () => {
    const mapContainerRef = useRef<HTMLDivElement>(null);
    const mapRef = useRef<leaflet.Map | undefined>(undefined);

    useEffect(() => {
        if (mapRef.current) {
            return;
        }

        if (!mapContainerRef.current) {
            return;
        }

        const map = leaflet.map(mapContainerRef.current);
        map.setView([51.505, -0.09], 13);

        leaflet
            .tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution:
                    '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
            })
            .addTo(map);

        mapRef.current = map;
    });

    return <div ref={mapContainerRef} class="map-container" />;
};