<template>
  <div
    v-if="displayCoords"
    class="absolute bottom-2 right-2 z-[501] rounded-lg px-3 py-2 font-mono text-sm bg-base-100/95 backdrop-blur-sm border border-base-300/50 shadow"
    aria-label="Current grid position and zoom"
    title="mapId · x, y · zoom"
  >
    {{ mapid }} · {{ displayCoords.x }}, {{ displayCoords.y }} · z{{ displayCoords.z }}
  </div>
</template>

<script setup lang="ts">
defineProps<{
  mapid: number
  displayCoords: { x: number; y: number; z: number } | null
}>()
</script>
