<template>
    <reviewBlock
        :headerCmsWidgetName="cmsWidgetName"
        :content="displayContent"
        :customHeaderText="damageInfoHeader"
        @edit-clicked="editClicked" />
</template>

<script>
import reviewBlock from "@/layouts/payment-method/review-dropdown/review-block/review-block";
import { getDamageInfoWordingText } from "@/helpers/damage-helper";

export default {
    name: "vehicle-review",
    props: {
        cmsWidgetName: String,
        vehicle: Object,
        damage: Object,
    },
    data() {
        return {};
    },
    methods: {
        editClicked() {
            this.$emit("edit-clicked");
        },
    },
    computed: {
        displayContent() {
            return [`${this.vehicle.year} ${this.vehicle.make} ${this.vehicle.model}`];
        },
        damageInfoWordingText() {
            return getDamageInfoWordingText(this.damage);
        },
        damageInfoHeader() {
            return this.getCmsContent("DamageInfoHeaderWidget", "Text")?.replaceAll(
                "{custom:GLASSPARTS}",
                this.damageInfoWordingText
            );
        },
    },
    components: {
        reviewBlock,
    },
};
</script>
