<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" :class="hasSubText ? 'dark-header' : 'light-header'">
        <span>
          {{ text }}
        </span>
        <buttonBack
          v-if="hasBackButton"
          :backButtonAccessibleText="backButtonAccessibleText"
          @click-event="clickEvent"
        />
      </h5>
    </div>
    <div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
      <p class="text-center small fw-normal mb-0">
        <span>
          {{ subText }}
        </span>
      </p>
    </div>
  </div>
</template>

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

export default {
  name: "FunnelSubHeader",
  data() {
    return {
      text: "",
      subText: "",
    };
  },
  props: {
    hasBackButton: Boolean,
    backButtonAccessibleText: String,
    hasSubText: Boolean
  },
  components: {
    buttonBack,
  },
  methods: {
    clickEvent() {
      this.$emit("click-event");
    },
    initializeComponent(cmsContent) {
      this.text = cmsContent.HeaderText;
      this.subText = cmsContent.HeaderSubText;
    },
  },
};
</script>

<style lang="scss">
h5 {
  line-height: 32px;

  button {
    color: inherit;
  }
}

.dark-header {
  color: $black;
}

.light-header {
  color: $gray-550;
}

p.small {
  color: $gray-550
}
</style>
