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

const props = defineProps<{ status: StatusType }>()

const statusColor = computed(() => {
  const map: Record<StatusType, string> = {
    '待办': 'var(--status-todo)',
    '进行中': 'var(--status-progress)',
    '已完成': 'var(--status-done)',
    '阻塞': 'var(--status-blocked)',
    '延期': 'var(--status-overdue)',
  }
  return map[props.status] || 'var(--status-todo)'
})
</script>

<template>
  <span class="status-badge" :style="{ '--status-color': statusColor }">
    <span class="status-dot" />
    {{ status }}
  </span>
</template>

<style scoped>
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--status-color) 12%, transparent);
  color: var(--status-color);
  white-space: nowrap;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--status-color);
}
</style>
