<template>
    <div
        class="text-block w-100"
        :class="[justifyText, typeStyle, fontWeight, margin]"
        v-html="this.TextBlockCopy"></div>
</template>

<script>
export default {
    name: "textBlock",
    props: {
        customText: String, // used to allow the insert of token values into textblock
        justifyText: String, // left, right, center
        margin: {
            // bootstrap margin to apply to the block.
            type: String,
            default: "mt-2",
        },
        typeStyle: String, // h1-h6, body, small, label, caption (see Figma or Confluence documentation)
        fontWeight: String, // bold=500, default is 400
        cmsWidgetName: String,
    },
    computed: {
        TextBlockCopy() {
            if (this.customText) {
                return this.customText;
            }
            return this.getCmsContent(this.cmsWidgetName, "Text");
        },
    },
};
</script>

<style lang="scss" scoped>
.text-block {
    display: flex;
    &.left {
        justify-content: flex-start;
    }
    &.right {
        justify-content: flex-end;
    }
    &.center {
        justify-content: center;
    }
    &.bold {
        font-weight: 500;
    }
}
</style>
