<template>
    <div class="review-block">
        <p class="review-block__header">
            {{ customHeaderText }}
        </p>
        <div class="review-body">
            <p
                v-for="line in lines"
                :key="line"
                v-html="line">
            </p>
        </div>
        <textLink
            linkType="text"
            :text="editLinkText"
            useLoadingModal
            href="javascript:void(0)"
            class="link"
            @clickEvent="editClicked">
            <template
                v-if="editScreenReaderTextCmsWidgetName"
                #after-text>
                <span class="sr-only"> {{ screenReaderOnlyText }} </span>
            </template>
        </textLink>
    </div>
</template>

<script>
import textLink from '@/ux-components/text-link/text-link.vue';

export default {
    name: 'review-block',
    components: { textLink },
    props: {
        customHeaderText: String,
        editScreenReaderTextCmsWidgetName: String,
        lines: Array,
        editLinkText: {
            type: String,
            default: 'Edit'
        },
    },
    emits: ['click-edit'],
    methods: {
        editClicked() {
            this.$emit('click-edit');
        }
    }
};
</script>

<style lang="scss" scoped>
.review-block {
    :deep(p) {
        margin: 0;
    }
    .review-block__header {
        color: $black;
        font-weight: $font-weight-bold;
        margin-bottom: .625rem;
    }

    .review-body {
        margin-bottom: .625rem
    }

    .link {
        font-weight: $font-weight-normal
    }
}
</style>
