<template>
  <span :class="badgeClass">
    <i :class="iconClass" class="me-1"></i>
    {{ statusText }}
  </span>
</template>

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

const props = defineProps({
  status: {
    type: String,
    required: true,
    validator: (value) => ['Draft', 'Approved', 'Cancelled'].includes(value)
  }
});

const statusConfig = {
  Draft: {
    text: 'Nháp',
    class: 'badge bg-light',
    icon: 'fe fe-edit-2'
  },
  Approved: {
    text: 'Đã duyệt',
    class: 'badge bg-success',
    icon: 'fe fe-check-circle'
  },
  Cancelled: {
    text: 'Đã hủy',
    class: 'badge bg-danger',
    icon: 'fe fe-x-circle'
  }
};

const statusText = computed(() => {
  return statusConfig[props.status]?.text || props.status;
});

const badgeClass = computed(() => {
  return statusConfig[props.status]?.class || 'badge bg-secondary';
});

const iconClass = computed(() => {
  return statusConfig[props.status]?.icon || 'fe fe-help-circle';
});
</script>

<style scoped>
.badge {
  font-size: 0.75rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

.badge i {
  font-size: 0.875rem;
}
</style>
