<template>
  <view class="inline-flex items-center px-2 rounded text-xs font-medium" :style="{ backgroundColor: bgColor, color: textColor, paddingTop: '2px', paddingBottom: '2px' }">
    {{ label }}
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import {
  getStatusText,
  getStatusColor,
  getStatusBgColor,
  getProjectStatusText
} from '@/utils'

type StatusTagType = 'task' | 'project'

const props = withDefaults(
  defineProps<{
    status: string
    type?: StatusTagType
  }>(),
  {
    type: 'task'
  }
)

const label = computed(() => {
  return props.type === 'project'
    ? getProjectStatusText(props.status)
    : getStatusText(props.status)
})

const textColor = computed(() => getStatusColor(props.status))
const bgColor = computed(() => getStatusBgColor(props.status))
</script>

<style scoped>
/* Tailwind 工具类已覆盖 */
</style>
