/** Pinia store for map state */
import { defineStore } from 'pinia'
import { ref } from 'vue'
import type { BusStop } from '@/types'

export const useMapStore = defineStore('map', () => {
    const markers = ref<BusStop[]>([])
    const selectedStop = ref<BusStop | null>(null)
    const center = ref({ lat: 8.4177, lng: -82.4270 }) // Panama coordinates (David/Boquete area)
    const zoom = ref(12)

    function setMarkers(stops: BusStop[]) {
        markers.value = stops
    }

    function setSelectedStop(stop: BusStop | null) {
        selectedStop.value = stop
    }

    function setCenter(lat: number, lng: number) {
        center.value = { lat, lng }
    }

    function setZoom(level: number) {
        zoom.value = level
    }

    return {
        markers,
        selectedStop,
        center,
        zoom,
        setMarkers,
        setSelectedStop,
        setCenter,
        setZoom,
    }
}, {
    persist: {
        pick: ['center', 'zoom']
    }
})