import L from 'leaflet';
import { useEffect, useRef } from 'react';
import 'leaflet/dist/leaflet.css';

interface LocationMapProps {
    latitude: number;
    longitude: number;
    height?: string;
    zoom?: number;
}

export function LocationMap({
    latitude,
    longitude,
    height = '250px',
    zoom = 15,
}: LocationMapProps) {
    const mapRef = useRef<HTMLDivElement>(null);
    const mapInstanceRef = useRef<L.Map | null>(null);

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

        const map = L.map(mapRef.current, {
            center: [latitude, longitude],
            zoom,
            zoomControl: false,
            attributionControl: true,
        });

        L.control.zoom({ position: 'topright' }).addTo(map);

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

        const icon = L.divIcon({
            html: `<div style="background: #ef4444; width: 24px; height: 24px; border-radius: 50%; border: 3px solid white; box-shadow: 0 2px 6px rgba(0,0,0,0.3);"></div>`,
            className: '',
            iconSize: [24, 24],
            iconAnchor: [12, 12],
        });

        L.marker([latitude, longitude], { icon }).addTo(map);

        mapInstanceRef.current = map;

        return () => {
            map.remove();
            mapInstanceRef.current = null;
        };
    }, [latitude, longitude, zoom]);

    return (
        <div
            ref={mapRef}
            style={{ height, width: '100%' }}
            className="rounded-lg"
        />
    );
}