<template>
  <span :class="priorityClass" :title="priorityText">
    <i :class="iconClass"></i>
    <span v-if="showText" class="ms-1">{{ priorityText }}</span>
  </span>
</template>

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

const props = defineProps({
  priority: {
    type: String,
    required: true,
    validator: (value) => ['Low', 'Medium', 'High', 'Urgent'].includes(value)
  },
  showText: {
    type: Boolean,
    default: false
  }
});

const priorityConfig = {
  Low: {
    text: 'Thấp',
    class: 'text-muted',
    icon: 'fe fe-arrow-down'
  },
  Medium: {
    text: 'Trung bình',
    class: 'text-info',
    icon: 'fe fe-minus'
  },
  High: {
    text: 'Cao',
    class: 'text-warning',
    icon: 'fe fe-arrow-up'
  },
  Urgent: {
    text: 'Khẩn cấp',
    class: 'text-danger',
    icon: 'fe fe-alert-triangle'
  }
};

const priorityText = computed(() => {
  return priorityConfig[props.priority]?.text || props.priority;
});

const priorityClass = computed(() => {
  return priorityConfig[props.priority]?.class || 'text-secondary';
});

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

<style scoped>
.text-muted {
  color: #6c757d !important;
}

.text-info {
  color: #0dcaf0 !important;
}

.text-warning {
  color: #ffc107 !important;
}

.text-danger {
  color: #dc3545 !important;
}

.text-secondary {
  color: #6c757d !important;
}

i {
  font-size: 1rem;
}
</style>
