<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 v-if="title" class="text-lg font-semibold mb-4">{{ title }}</h3>
      <p class="text-gray-800 mb-4">{{ message }}</p>
      <div class="text-right">
        <button @click="$emit('close')" class="bookaro-btn bookaro-btn--primary">
          {{ i18n.ok }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'InfoModal',
  props: {
    show: Boolean,
    title: { type: String, default: '' },
    message: { type: String, default: '' },
    i18n: { type: Object, default: () => ({}) }
  }
};
</script>

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

