<script setup lang="ts">
import Badge from './badge.vue'
import { rowStatus } from './list-cfg'

const props = defineProps<{
  rec: { status: number }
  idx?: number
}>()

const variants = {
  0: 'error',
  1: 'warning',
  2: 'info',
} as const

const statusText = computed(() => {
  return rowStatus[props.rec.status as keyof typeof rowStatus]
})

const badgeStatus = computed((): 'error' | 'warning' | 'success' | 'info' => {
  return variants[props.rec.status as keyof typeof variants] ?? 'info'
})
</script>

<template>
  <div class="flex">
    <Badge :status="badgeStatus" :text="statusText" />
  </div>
</template>
