<template>
  <span :class="className">
    {{ formattedAmount }}
  </span>
</template>

<script setup>
import { computed } from 'vue';
import { BankAccountUtils } from '@/infrastructure/constants/bankAccountConstants';

// Props
const props = defineProps({
  amount: [Number, String],
  currency: {
    type: String,
    default: 'đ'
  },
  showSign: {
    type: Boolean,
    default: false
  },
  colorize: {
    type: Boolean,
    default: false
  },
  className: String
});

// Computed
const formattedAmount = computed(() => {
  if (!props.amount && props.amount !== 0) return '';
  
  const numAmount = typeof props.amount === 'string' 
    ? parseFloat(props.amount.replace(/[,\s]/g, '')) 
    : props.amount;
  
  let formatted = BankAccountUtils.formatCurrency(numAmount);
  
  if (props.showSign && numAmount > 0) {
    formatted = '+' + formatted;
  }
  
  return formatted + props.currency;
});

const className = computed(() => {
  let classes = props.className || '';
  
  if (props.colorize) {
    const numAmount = typeof props.amount === 'string' 
      ? parseFloat(props.amount.replace(/[,\s]/g, '')) 
      : props.amount;
    
    if (numAmount > 0) {
      classes += ' text-success';
    } else if (numAmount < 0) {
      classes += ' text-danger';
    } else {
      classes += ' text-muted';
    }
  }
  
  return classes.trim();
});
</script>
