<script setup lang="ts">
import { computed } from 'vue';
import { formatRupiah } from '@/lib/rupiah';

const props = defineProps<{
    amount: number | string;
    formatted?: string | null;
}>();

const display = computed(() => {
    if (props.formatted) {
        return props.formatted;
    }

    const numericAmount = typeof props.amount === 'string'
        ? Number.parseInt(props.amount, 10)
        : props.amount;

    return `Rp ${formatRupiah(Number.isFinite(numericAmount) ? numericAmount : 0)}`;
});
</script>

<template>
    <span>{{ display }}</span>
</template>
