'use client'

import React, { useEffect, useRef } from 'react'
import maplibregl from 'maplibre-gl'
import 'maplibre-gl/dist/maplibre-gl.css'
import { useMap } from '@/app/map-context'
import { useTheme } from '@/components/theme-provider'

interface MapComponentProps {
    style?: string
    center?: [number, number]
    zoom?: number
}

export function MapComponent({
    style = 'https://api.maptiler.com/maps/019817f1-82a8-7f37-901d-4bedf68b27fb/style.json?key=hj3fxRdwF9KjEsBq8sYI',
    center = [103.851959, 1.290270],
    zoom = 11
}: MapComponentProps) {
    const mapContainer = useRef<HTMLDivElement>(null)
    const { setMap } = useMap()

    useEffect(() => {
        if (!mapContainer.current) return

        const map = new maplibregl.Map({
            container: mapContainer.current,
            style,
            center,
            zoom
        })

        setMap(map)

        return () => {
            map.remove()
        }
    }, [style, center, zoom, setMap])

    return (
        <div
            ref={mapContainer}
            className="w-full h-full"
            style={{ minHeight: '400px' }}
        />
    )
}