<script lang="ts">
	import { MAP_ICONS, type Location } from "$lib/saved.svelte";
	import { Marker } from "svelte-maplibre-gl";
	import { map } from "./map.svelte";

	let { store }: { store: Location } = $props();

	let marker: HTMLImageElement | undefined = $state();
</script>
<img
	src={map.zoom > 9 ? `/img/saved/${MAP_ICONS[store.icon ?? "small.png"]}` : "/img/saved/small.png"}
	alt="Work Marker"
	bind:this={marker}
	style="width: 32px;"
/>
<Marker
	lnglat={{
		lat: store.lat,
		lng: store.lng,
	}}
	element={marker}
/>