<template>
  <div class="relative h-full w-full">
    <slot v-if="!caughtError" />
    <div
      v-else
      class="absolute inset-0 z-[600] flex flex-col items-center justify-center gap-4 bg-base-200/95 p-8"
      role="alert"
    >
      <p class="text-center text-lg font-medium">Map failed to load</p>
      <p class="text-center text-sm text-base-content/80">
        Something went wrong while loading the map. This can be due to a network or script error. You can try reloading the page.
      </p>
      <button type="button" class="btn btn-primary" @click="reload">
        Reload page
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
const caughtError = ref<Error | null>(null)

function reload() {
  if (import.meta.client) {
    window.location.reload()
  }
}

onErrorCaptured((err) => {
  caughtError.value = err
  return true
})
</script>
