"use client";
import React from "react";
import type { LatLng, LatLngExpression } from "leaflet";
import { MapContainer, MapMarker, MapEvents } from "@/components/ui/map";

type MapPickerProps = {
    lat?: number;
    lng?: number;
    zoom?: number;
    position?: LatLngExpression;
    onChange?: (position: LatLng) => void;
};

export const MapPicker: React.FC<MapPickerProps> = (props) => {
    const {
        position,
        zoom = 12,
        onChange
    } = props;

    return (
        <MapContainer
          zoom={zoom}
          center={position || [55.676, 12.564]}
          height={300}>
            <MapEvents onClick={onChange} />

            {position && (
                <MapMarker
                  position={position}
                  onDragEnd={onChange} />
            )}
        </MapContainer>
    );
};