<template>
  <el-tag :type="tagType" :effect="effect" :size="size">
    {{ statusLabel }}
  </el-tag>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import { getCardStatusLabel, getCardStatusType } from '@/config/constants'
  import type { CardStatus } from '@/types/api'

  interface Props {
    status: CardStatus
    effect?: 'dark' | 'light' | 'plain'
    size?: 'large' | 'default' | 'small'
  }

  const props = withDefaults(defineProps<Props>(), {
    effect: 'light',
    size: 'default'
  })

  const statusLabel = computed(() => getCardStatusLabel(props.status))
  const tagType = computed(() => getCardStatusType(props.status))
</script>
