<script setup lang="ts">
import { computed } from 'vue'
import type { PriorityType } from '@/types/card'

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

const HEX_MAP: Record<PriorityType, string> = {
  '紧急': '#ef4444',
  '高': '#f97316',
  '中': '#38bdf8',
  '低': '#64748b',
}

const hexColor = computed(() => HEX_MAP[props.priority] || '#64748b')

const isUrgent = computed(() => props.priority === '紧急')

const label = computed(() => {
  const map: Record<PriorityType, string> = {
    '紧急': '!!',
    '高': '!',
    '中': '\u00b7',
    '低': '',
  }
  return map[props.priority]
})
</script>

<template>
  <span
    class="priority-badge"
    :class="{ urgent: isUrgent }"
    :style="{ color: hexColor, background: hexColor + '2A', borderColor: hexColor + '40' }"
  >
    <span class="pri-symbol" v-if="label">{{ label }}</span>
    {{ priority }}
  </span>
</template>

<style scoped>
.priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid;
  white-space: nowrap;
  transition: transform 0.12s;
}

.priority-badge.urgent {
  font-size: 13px;
  padding: 4px 12px;
  animation: pulse 2s ease-in-out infinite;
}

.pri-symbol {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}
</style>
