<template>
    <div class="funnel-sub-header">
        <div
            class="d-flex align-items-center container-fluid overflow-hidden"
            :class="[textAlignment]">
            <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
            v-if="subText"
            class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
            <p class="text-center small fw-normal sub-text">
                <span>
                    {{ subText }}
                </span>
            </p>
        </div>
    </div>
</template>

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

export default {
    name: "FunnelSubHeader",
    props: {
        hasBackButton: Boolean,
        cmsWidgetName: String,
        headerColor: {
            type: String,
            default: "dark-header",
        },
        leftAlignHeader: {
            type: Boolean,
            default: false,
        },
    },
    components: {
        buttonBack,
    },
    computed: {
        text() {
            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
        },
        textAlignment() {
            return this.leftAlignHeader ? "justify-content-start" : "justify-content-center";
        },
        subText() {
            return this.getCmsContent(this.cmsWidgetName, "HeaderSubText");
        },
        backButtonAccessibleText() {
            return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText");
        },
    },
    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;
}
.sub-text {
    margin: 0;
}

.justify-content-start {
    padding-left: 0;
}
</style>
