<script setup lang="ts">
import { computed } from 'vue'

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

const badgeClass = computed(() => {
  const s = props.status.toLowerCase().replace(/\s+/g, '_')
  const map: Record<string, string> = {
    done: 'status-done',
    in_progress: 'status-in_progress',
    blocked: 'status-blocked',
    draft: 'status-draft',
    todo: 'status-todo',
    deprecated: 'status-deprecated',
  }
  return map[s] || 'status-draft'
})

const label = computed(() => {
  return props.status.replace(/_/g, ' ')
})
</script>

<template>
  <span class="status-badge" :class="badgeClass">{{ label }}</span>
</template>
