<script setup lang="ts">
import CustomMarker from "~/components/svg/Contact/CustomMarker.vue";

const openMapLink = (url: string) => {
  window.open(url, "_blank");
};
</script>

<template>
  <LMap
    :zoom="4"
    :center="[24.5, 35.9]"
    :use-global-leaflet="true"
    :options="{
      zoomControl: false,
      attributionControl: false,
    }"
    style="height: 100%; width: 100%; border-radius: 16px;"
  >
    <LTileLayer
      url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png"
      layer-type="base"
    />

    <!-- Cairo -->
    <LMarker
      :lat-lng="[30.048644807551046, 31.2088616]"
      @click="openMapLink('https://maps.app.goo.gl/Tm2wKkMUF4w8jWoR7')"
    >
      <LIcon><CustomMarker /></LIcon>
    </LMarker>

    <!-- Riyadh -->
    <LMarker
      :lat-lng="[24.79489695011703, 46.65194995233404]"
      @click="openMapLink('https://maps.app.goo.gl/rDFnf81QtrnfNZx18')"
    >
      <LIcon><CustomMarker /></LIcon>
    </LMarker>
  </LMap>
</template>


<style >
.leaflet-pane,
.leaflet-map-pane,
.leaflet-tile-pane,
.leaflet-overlay-pane,
.leaflet-shadow-pane,
.leaflet-marker-pane,
.leaflet-tooltip-pane,
.leaflet-popup-pane {
  z-index: 0 !important;
}
</style>
