<template>
  <div v-if="show" class="fixed inset-0 pop-cont bg-black bg-opacity-50 flex items-center justify-center">
    <div class="bookaro-card bookaro-card__body w-full bookaro-modal-shell bookaro-modal-shell--sm">
      <h3 class="text-lg font-semibold text-red-600 mb-4">
        {{ i18n.error_title }}
      </h3>

      <p class="text-gray-800 mb-4">
        {{ message || i18n.generic_error }}
      </p>

      <div class="text-right">
        <button
            @click="$emit('close')"
            class="bookaro-btn bookaro-btn--outline"
        >
          {{ i18n.try_again }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ErrorModal',
  props: {
    show: Boolean,
    message: String
  },
  computed: {
    i18n() {
      return this.$root.i18n || {};
    }
  }
};
</script>

<style scoped>
.pop-cont {
  z-index: 999;
}
</style>
