<template>
  <div class="current_car_info-text">
    <div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
      <h5 class="text-center fw-normal mb-0">
        <span>
          {{ text }}
        </span>
        <buttonBack
          v-if="hasBackButton"
          :backButtonAccessibleText="backButtonAccessibleText"
          @click-event="clickEvent"
        />
    </h5>
    </div>
  </div>
</template>

<script>
import buttonBack from "@/common-components/button-back/button-back";

export default {
  name: "FunnelSubHeader",
  props: {
    text: String,
    hasBackButton: Boolean,
    backButtonAccessibleText: String,
  },
  components: {
    buttonBack,
  },
  methods: {
    clickEvent() {
      this.$emit('click-event');
    }
  },
};
</script>

<style lang="scss">
  h5 {
    color: $gray-550;

    button {
      border: none;
      background: none;
      color: inherit;
    }
  }
  .back-button-wrapper {
    margin-left: 0;
  }
</style>
