<template>
    <div class="mb-4">
        <div>
            <strong>
                {{ headerText }}
            </strong>
        </div>
        <div class="price" :class="markAsHigher ? 'red' : 'green'">
            {{ priceText }}
        </div>
    </div>
</template>

<script>
export default {
    name: "price-display",
    data() {
        return {};
    },
    props: {
        cmsWidgetName: String,
        price: Number,
        markAsHigher: Boolean,
    },
    methods: {},
    computed: {
        headerText() {
            return this.getCmsContent(this.cmsWidgetName, "Text");
        },
        priceText() {
            const toFixed = this.price.toFixed(2);
            return `$${toFixed}`;
        },
    },
    components: {},
};
</script>

<style lang="scss">
.price {
    font-size: 1.5em;
    display: inline-block;

    &.green {
        color: $green-700;
        border-bottom: 3px solid $red-800;
    }
    &.red {
        color: $red-700;
        border-bottom: 3px solid $red-800;
    }
}
</style>
