<script lang="ts" setup>
import { computed } from 'vue';

const props = defineProps<{ value: number | undefined }>();

const internalValue = computed(() => Number(props.value ?? 0));

const formattedValue = computed(() => internalValue.value.toLocaleString(undefined, {
    minimumFractionDigits: 2,
}));
</script>

<template>
    <span class="text-right" :class="internalValue < 0 ? 'negative' : ''">{{ formattedValue }} €</span>
</template>