<template>
  <Badge :variant="getStatusVariant(status)" class="w-[100px] text-xs text-middle">
    {{ formatStatus(status) }}
  </Badge>
</template>

<script setup lang="ts">
import { Badge } from '@/components/ui/badge'
import { TaskStatus } from '@/services/asset'

interface Props {
  status: TaskStatus
}

defineProps<Props>()

const getStatusVariant = (status: TaskStatus) => {
  switch (status) {
    case TaskStatus.NOT_STARTED:
      return 'secondary'
    case TaskStatus.IN_PROGRESS:
       return 'default'
    case TaskStatus.SUBMITTED:
      return 'outline'
    case TaskStatus.APPROVED:
      return 'default'
    case TaskStatus.RETAKE:
      return 'destructive'
    default:
      return 'secondary'
  }
}

const formatStatus = (status: TaskStatus) => {
  switch (status) {
    case TaskStatus.NOT_STARTED:
      return 'Not Started'
    case TaskStatus.IN_PROGRESS:
      return 'In Progress'
    case TaskStatus.SUBMITTED:
      return 'Submitted'
    case TaskStatus.APPROVED:
      return 'Approved'
    case TaskStatus.RETAKE:
      return 'Retake'
    default:
      return status
  }
}
</script>