<template>
  <span class="inline-flex items-center text-xs px-2 py-0.5 rounded-full" :class="badgeClasses">
    <i :class="icon" class="mr-1" />
    <span>{{ displayLabel }}</span>
  </span>
</template>

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

const props = defineProps({
  /** ‘deleted’ → red background, ‘draft’ → outline grey */
  status: { type: String as PropType<'deleted' | 'draft'>, required: true },
  label: { type: String, default: '' },
})

const badgeClasses = computed(() =>
  props.status === 'deleted'
    ? 'text-red-700'
    : props.status === 'draft'
    ? 'text-muted-foreground bg-muted'
    : 'border border-gray-300 text-gray-700'
)

const icon = computed(() =>
  props.status === 'deleted' ? 'dku-icon-dismiss-circle-outline-16' : 'dku-icon-custom-page-16'
)
// use the override if provided, else use the default
const defaultLabel = computed(() => (props.status === 'deleted' ? 'Deleted' : 'Draft'))

const displayLabel = computed(() => props.label || defaultLabel.value)
</script>
