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

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

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

const verifyStatusText = computed(() => {
  const code: keyof typeof verifyStatusCodes = props.rec.status.verified === 1 ? `verified` : `unverified`
  return verifyStatusCodes[code]
})
const validateStatusText = computed(() => {
  const code: keyof typeof validateStatusCodes = props.rec.status.validated === 1 ? `validated` : `unvalidated`
  return validateStatusCodes[code]
})

const verifyBadgeVariant = computed(() => {
  return props.rec.status.verified === 1 ? 'default' : 'outline'
})
const validateBadgeVariant = computed(() => {
  return props.rec.status.validated === 1 ? 'default' : 'outline'
})
</script>

<template>
  <div class="flex flex-col gap-2 items-center justify-center">
    <Badge :variant="verifyBadgeVariant" class="w-fit rounded-2xl text-[0.6rem]" >
      {{ verifyStatusText }}
    </Badge>
    <Badge :variant="validateBadgeVariant" class="w-fit rounded-2xl text-[0.6rem]" >
      {{ validateStatusText }}
    </Badge>
  </div>
</template>