<template>
  <div class="text-center failure-step">
    <h3>😢 {{ i18n.error_title }}</h3>
    <div class="error">{{ error }}</div>
    <button
        class="bookaro-booking-btn"
        @click="retry"
    >
      {{ i18n.try_again }}
    </button>
  </div>
</template>

<script>
export default {
  name: 'FailureStep',
  props: {
    i18n: {
      type: Object,
      required: true
    },
    error: {
      type: String,
      required: true
    },
    listing_id: {
      type: [String, Number],
      required: true
    },
    service_label: {
      type: String,
      required: true
    },
    provider_id: {
      type: [String, Number],
      required: true
    }
  },
  methods: {
    retry() {
      // Emit special “advance” event to parent with full context so modal reopens at date-time step
      this.$emit('advance', {
        step: 1,
        listing_id: this.listing_id,
        service_label: this.service_label,
        provider_id: this.provider_id
      });
    }
  }
};
</script>

<style scoped>
/* Centered styling, error in red text */
.failure-step {
  text-align: center;
}
.error {
  color: red;
  margin: 1em 0;
}
</style>

