'use client'

/**
 * GeocoderControl - Address search with autocomplete
 *
 * Requires: @maplibre/maplibre-gl-geocoder
 * CSS: @import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css'
 *
 * @example
 * ```tsx
 * import { useState } from 'react'
 * import { useControl, Marker } from '@carapis/map'
 * import MaplibreGeocoder from '@maplibre/maplibre-gl-geocoder'
 *
 * const geocoderApi = {
 *   forwardGeocode: async (config) => {
 *     const features = []
 *     const response = await fetch(
 *       `https://nominatim.openstreetmap.org/search?q=${config.query}&format=geojson`
 *     )
 *     const geojson = await response.json()
 *     for (const feature of geojson.features) {
 *       const center = [
 *         feature.bbox[0] + (feature.bbox[2] - feature.bbox[0]) / 2,
 *         feature.bbox[1] + (feature.bbox[3] - feature.bbox[1]) / 2,
 *       ]
 *       features.push({
 *         type: 'Feature',
 *         geometry: { type: 'Point', coordinates: center },
 *         place_name: feature.properties.display_name,
 *         properties: feature.properties,
 *         text: feature.properties.display_name,
 *         center,
 *       })
 *     }
 *     return { features }
 *   },
 * }
 *
 * function GeocoderControl({ position, onResult }) {
 *   const [marker, setMarker] = useState(null)
 *
 *   useControl(
 *     ({ mapLib }) => {
 *       const ctrl = new MaplibreGeocoder(geocoderApi, {
 *         maplibregl: mapLib,
 *         marker: false,
 *       })
 *       ctrl.on('result', (evt) => {
 *         onResult?.(evt)
 *         const { result } = evt
 *         if (result?.center) {
 *           setMarker(
 *             <Marker longitude={result.center[0]} latitude={result.center[1]} />
 *           )
 *         }
 *       })
 *       return ctrl
 *     },
 *     { position }
 *   )
 *
 *   return marker
 * }
 * ```
 */

// Re-export for documentation purposes
// Actual implementation requires user to install @maplibre/maplibre-gl-geocoder
export { }
