<template>
    <div
        class="text-block w-100 mt-2"
        :class="[justifyText, typeStyle, fontWeight]"
        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, // right, center (left is default)
        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 {
    &.right {
        text-align: right;
    }
    &.center {
        text-align: center;
    }
    &.bold {
        font-weight: 500;
    }
}
</style>
