<template>
  <span :class="`badge bg-${color} ${size ? `fs-${size}` : ''}`">
    {{ displayText }}
  </span>
</template>

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

// Props
const props = defineProps({
  status: [Number, String],
  type: {
    type: String,
    default: 'account', // 'account', 'transaction', 'import'
    validator: (value) => ['account', 'transaction', 'import'].includes(value)
  },
  size: [Number, String] // Bootstrap font size (6, 5, 4, etc.)
});

// Computed
const displayText = computed(() => {
  switch (props.type) {
    case 'account':
      return BankAccountUtils.getStatusName(props.status);
    case 'transaction':
      return BankAccountUtils.getTransactionStatusName(props.status);
    case 'import':
      return props.status; // Import status is already text
    default:
      return props.status;
  }
});

const color = computed(() => {
  switch (props.type) {
    case 'account':
      return BankAccountUtils.getStatusColor(props.status);
    case 'transaction':
      return BankAccountUtils.getTransactionStatusColor(props.status);
    case 'import':
      // Handle import status color based on text
      if (typeof props.status === 'string') {
        if (props.status.includes('Thành công')) return 'success';
        if (props.status.includes('Thất bại')) return 'danger';
        if (props.status.includes('Đang xử lý')) return 'warning';
        if (props.status.includes('Đã hủy')) return 'secondary';
        if (props.status.includes('cảnh báo')) return 'info';
      }
      return 'secondary';
    default:
      return 'secondary';
  }
});
</script>
