<script setup lang="ts">
import type { DefaultMarker } from '@/models/Markers';
import { LMarker, LPopup, LIcon } from '@vue-leaflet/vue-leaflet'
import type { Marker, PointTuple } from 'leaflet';
import { computed, ref } from 'vue';

defineProps<{
  marker: DefaultMarker
}>()

const iconSize = ref<PointTuple>([38, 38])
const iconAnchor = computed<PointTuple>(() => [iconSize.value[0] / 2, iconSize.value[1]])
const popupOffset = [0, iconSize.value[0] * -0.66]
</script>

<template>
  <LMarker :lat-lng="marker.coords">
    <LPopup :options="{ offset: popupOffset, maxWidth: 380, minWidth: 180 }">
      <div class="spacing">
        <h2 class="font-bold text-[1.2em] leading-5">
          {{ marker.title }}
        </h2>
      </div>
    </LPopup>
  </LMarker>
</template>
