<template>
    <div class="py-3">
        <div class="d-flex">
            <textBlock
                :cmsWidgetName="headerCmsWidgetName"
                :customText="customHeaderText"
                typeStyle="body small dark"
                fontWeight="bold"
                :marginTopSizeOverride="0" />
        </div>
        <div
            v-for="item in content"
            :key="item"
            class="small review-block-content"
            data-test="contentLine"
            v-html="item"></div>
    </div>
</template>

<script>
import textBlock from '@/digital-components/text-block/text-block.vue';

export default {
    name: 'review-block',
    components: {
        textBlock
    },
    props: {
        headerCmsWidgetName: String,
        customHeaderText: String,
        content: Array // Specifically an array of strings.
    },
    emits: ['edit-clicked'],
    data() {
        return {};
    },
    computed: {
        screenReaderOnlyText() {
            return this.getCmsContent(this.editScreenReaderTextCmsWidgetName, 'Text');
        }
    },
    methods: {
        linkClicked() {
            this.$emit('edit-clicked');
        }
    }
};
</script>

<style lang="scss" scoped>
:deep(.review-block-content > ul) {
    margin-bottom: 0rem;
}
.review-block-content {
    width: 90%;
}
</style>
