<template>
  <div class="login-prompt">
    <h3>{{ i18n.login_title }}</h3>
    <p>{{ i18n.login_text }}</p>
    <a :href="login_url" class="bookaro-booking-btn login-button" @click="handleLoginClick">
      {{ i18n.login }}
    </a>
  </div>
</template>

<script>
export default {
  name: 'LoginPrompt',
  props: {
    i18n: {
      type: Object,
      required: true
    },
    login_url: {
      type: String,
      required: true
    },
    rebook_payload: {
      type: Object,
      required: false,
      default: null
    }
  },
  methods: {
    handleLoginClick() {
      if (!this.rebook_payload) {
        return;
      }
      try {
        localStorage.setItem('bookaro_rebook', JSON.stringify(this.rebook_payload));
      } catch (e) {
        // Ignore storage errors (private browsing, quota, etc.)
      }
    }
  }
};
</script>

<style scoped>
/* You may keep your existing login‐prompt styling here */
</style>

