<template>
    <div>
      <div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
        <h5 class="text-center fw-normal mb-0 subheader-primary" :class="headerColor">
          <span>
            {{ content }}
          </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 subheader-secondary">
                <span>
                    {{ subText }}
                </span>
            </p>
        </div>
    </div>
  </template>

<script>
import buttonBack from "@/iss-components/site-sub-header/button-back/button-back";


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

  
<style lang="scss" scoped>
.dark-header {
    color: $black;
}

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

h5 {
  line-height: 32px;

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