<script setup lang="ts">
import { Badge, type Variants } from '~/components/pub/ui/badge'

const activeStatusCodes: Record<string, string> = {
  verified: 'Terverifikasi',
  validated: 'Tervalidasi',
  unverified: 'Belum Verifikasi',
  unvalidated: 'Batal Validasi',
}

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

const statusText = computed(() => {
  let code: keyof typeof activeStatusCodes = `unverified`
  switch (props.rec.status_code) {
    case 1:
      code = 'verified'
      break
    case 2:
      code = 'validated'
      break
    case 3:
      code = 'unverified'
      break
    case 4:
      code = 'unvalidated'
      break
    default:
      code = 'unverified'
      break
  }
  return activeStatusCodes[code]
})

const badgeVariant = computed(() => {
  let variant: Variants = `outline`
  switch (props.rec.status_code) {
    case 1:
      variant = 'secondary'
      break
    case 2:
      variant = 'default'
      break
    case 3:
      variant = 'outline'
      break
    case 4:
      variant = 'destructive'
      break
    default:
      variant = 'outline'
      break
  }
  return variant
})
</script>

<template>
  <div class="flex justify-center">
    <Badge :variant="badgeVariant" class="rounded-2xl text-[0.6rem]" >
      {{ statusText }}
    </Badge>
  </div>
</template>