<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="headerColor">
        <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/funnel-sub-header/button-back/button-back";

export default {
  name: "FunnelSubHeader",
  props: {
    hasBackButton: Boolean,
    backButtonAccessibleText: String,
    cmsWidgetName: String,
  },
  components: {
    buttonBack,
  },
  computed: {
    text(){
      return this.getCmsContent(this.cmsWidgetName, 'HeaderText');
    },
    subText(){
      return this.getCmsContent(this.cmsWidgetName, 'HeaderSubText');
    },
    headerColor(){
      return this.subText ? 'dark-header' : 'light-header';
    }
  },
  methods: {
    clickEvent() {
      this.$emit("click-event");
    },
  },
};
</script>

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

  button {
    color: inherit;
  }
}

.dark-header {
  color: $black;
}

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

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