<template>
  <span :class="statusClass">
    {{ statusText }}
  </span>
</template>

<script setup>
import { computed } from 'vue'
import incomeService from '@/services/incomeService'

const props = defineProps({
  status: {
    type: Number,
    required: true
  }
})

const statusText = computed(() => {
  return incomeService.getStatusText(props.status)
})

const statusClass = computed(() => {
  const baseClass = 'badge'
  const statusClass = incomeService.getStatusClass(props.status)
  return `${baseClass} bg-${statusClass}`
})
</script>

<style scoped>
.badge {
  font-size: 0.75rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
}
</style>

