<!-- File: assets/js/components/modals/NoteModal.vue -->
<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--md">
      <h3 class="text-lg font-semibold mb-4">{{ title }}</h3>

      <textarea
          v-model="text"
          rows="4"
          class="bookaro-textarea w-full mb-4"
          :placeholder="i18n.enter_note"
      ></textarea>

      <div class="flex justify-end space-x-2">
        <button
            @click="$emit('close')"
            class="bookaro-btn bookaro-btn--outline"
        >
          {{ i18n.cancel }}
        </button>
        <button
            @click="submit"
            :disabled="saving"
            class="bookaro-btn bookaro-btn--primary"
        >
          <span
              v-if="saving"
              class="modal‐spinner inline-block w-4 h-4 border-2 border-t-white rounded-full animate-spin mr-2"
          ></span>
          {{ i18n.save }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NoteModal',
  props: {
    show: Boolean,
    booking: Object,
    title: String,
    saving: Boolean,
    prefillText: String,
    i18n: { type: Object, required: true }
  },
  data() {
    return { text: '' };
  },
  watch: {
    show(val) {
      if (val) this.text = this.prefillText || '';
    }
  },
  methods: {
    submit() {
      this.$emit('save', this.text.trim());
    }
  }
};
</script>

<style scoped>
/* Ensure the spinner is a fixed 1rem × 1rem, not huge */
.modal‐spinner {
  border: 2px solid transparent;
  border-top-color: #fff;
  border-radius: 50%;
  width: 1rem;    /* exactly 1rem wide */
  height: 1rem;   /* exactly 1rem tall */
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.pop-cont {
  z-index:999;
}
</style>

