<template>
    <div class="dv-core-index-item">
        <div class="dv-core-index-item-inner">
            <div class="dv-core-index-value">{{shownValue}}<span class="core-index-unit">{{unit}}</span></div>
            <div class="dv-core-index-name">{{name}}</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'DvCoreIndexItem',
        props: {
            name: null,
            unit: null,
            default: {
              default: '-'
            },
            value: null
        },
        computed: {
            shownValue () {
                return this.value || this.default;
            }
        }
    };
</script>
