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

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

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

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

    const safeAmount = Number.isFinite(numericAmount) ? numericAmount : 0;

    if (props.short) {
        return `Rp ${formatRupiahShort(safeAmount)}`;
    }

    return `Rp ${formatRupiah(safeAmount)}`;
});
</script>

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