<template>
  <div
    class="h-screen absolute w-full z-10 flex justify-center items-start pt-[125px] bg-black/50"
  >
    <div
      class="flex flex-col bg-white w-[80%] sm:w-[450px] px-6 py-4 rounded-md"
    >
      <h1 class="text-lg mb-1">Error: {{ this.geoErrorMsg }}</h1>
      <p class="text-sm mb-4">Please ensure location services are enabled</p>
      <button
        @click="$emit('closeGeoError')"
        class="self-start py-2 px-4 bg-red-500 text-white rounded-md text-sm"
      >
        Close
      </button>
    </div>
  </div>
</template>

<script>
export default {
  props: ["geoErrorMsg"],
};
</script>