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

const props = defineProps<{
  priority: TaskPriority;
  /** Dense surfaces — see StatusBadge. */
  compact?: boolean;
}>();

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}`, { compact }]"
  >
    {{ labels[props.priority] }}
  </span>
</template>

<style scoped>
.priority-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  /* 500 is the heaviest the house style goes — 400 and 500 only. */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.compact {
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 0.7rem;
  text-transform: none;
  letter-spacing: normal;
}
.priority-low {
  background: var(--fs-priority-low-bg);
  color: var(--fs-priority-low-fg);
}
.priority-medium {
  background: var(--fs-priority-medium-bg);
  color: var(--fs-priority-medium-fg);
}
.priority-high {
  background: var(--fs-priority-high-bg);
  color: var(--fs-priority-high-fg);
}
</style>
