<script setup lang="ts">
import type { TaskPriority } from "@/types/task";

const props = defineProps<{
  priority: TaskPriority;
}>();

const labels: Record<TaskPriority, string> = {
  none: "",
  low: "Low",
  medium: "Medium",
  high: "High",
};
</script>

<template>
  <span
    v-if="props.priority !== 'none'"
    :class="['priority-badge', `priority-${props.priority}`]"
  >
    {{ labels[props.priority] }}
  </span>
</template>

<style scoped>
.priority-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.priority-low {
  background: var(--fs-priority-low-bg);
  color: var(--fs-priority-low);
}
.priority-medium {
  background: var(--fs-priority-medium-bg);
  color: var(--fs-priority-medium);
}
.priority-high {
  background: var(--fs-priority-high-bg);
  color: var(--fs-priority-high);
}
</style>
