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

<script setup>
import { computed } from 'vue'

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

// Status mapping
const statusMap = {
  0: { text: 'Chờ duyệt', class: 'bg-warning text-dark' },
  1: { text: 'Đã duyệt', class: 'bg-success' },
  2: { text: 'Đã từ chối', class: 'bg-danger' },
  3: { text: 'Đã thanh toán', class: 'bg-info' }
}

// Computed
const statusText = computed(() => {
  return statusMap[props.status]?.text || 'Không xác định'
})

const statusClass = computed(() => {
  return statusMap[props.status]?.class || 'bg-secondary'
})
</script>

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