<template>
    <div class="review-block">
        <div class="d-flex justify-content-between">
            <p class="review-block__header small-strong pb-1">
                {{ customHeaderText }}
            </p>
            <textLink
                linkType="textSmall"
                :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>
        <p
            v-for="line in lines"
            :key="line"
            class="small review-block__body--line"
            v-html="line">
        </p>
    </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
    },
    emits: ['click-edit'],
    data() {
        return {
            editLinkText: 'Edit'
        };
    },
    methods: {
        editClicked() {
            this.$emit('click-edit');
        }
    }
};
</script>

<style lang="scss" scoped>
.review-block {
    :deep(p) {
        margin: 0;
    }
    .review-block__header {
        color: $black;
    }
    .review-block__body--line {
        color: $gray-600;
    }
    .link {
        text-underline-offset: 1px;
    }
}
</style>
