<script setup>
import { toCurrency, toPercentage } from 'filters/index';

import { computed } from 'vue';

const props = defineProps({
    value: {
        type: Number,
        required: true,
    },
    format: {
        type: String,
        default: 'percentage', // 'currency'
    },
});

const valueClass = computed(() =>
    props.value === 0 ? 'neutral' : props.value > 0 ? 'positive' : 'negative',
);
const iconName = computed(() =>
    props.value === 0 ? 'equal' : props.value > 0 ? 'arrow_upward' : 'arrow_downward',
);
const formattedValue = computed(() => props.value);
</script>
<template>
    <span :class="valueClass">
        <QIcon :name="iconName" size="sm" class="value-icon" />
        <span v-if="$props.format === 'percentage'">{{
            toPercentage(formattedValue)
        }}</span>
        <span v-if="$props.format === 'currency'">{{ toCurrency(formattedValue) }}</span>
    </span>
</template>

<style lang="scss" scoped>
.positive {
    color: $secondary;
}
.negative {
    color: $negative;
}
.neutral {
    color: $primary;
}
.value-icon {
    margin-right: 4px;
}
</style>
