<template>
  <span
    class="text-xs font-medium px-3 py-1 rounded-full"
    :class="badgeClass"
  >
    {{ status }}
  </span>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  status: String
})

const badgeClass = computed(() => {
  switch (props.status) {
    case 'Digunakan':
      return 'bg-green-100 text-green-600'
    case 'Maintenance':
      return 'bg-yellow-100 text-yellow-700'
    case 'Ready to use':
      return 'bg-blue-100 text-blue-600'
    default:
      return 'bg-gray-100 text-gray-600'
  }
})
</script>