<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  status: 'starting' | 'running' | 'crashed' | 'exited'
}>()

const cls = computed(() => {
  switch (props.status) {
    case 'starting':
      return 'bg-blue-100 text-blue-800 border-blue-300'
    case 'running':
      return 'bg-green-100 text-green-800 border-green-300'
    case 'crashed':
      return 'bg-red-100 text-red-800 border-red-300'
    case 'exited':
      return 'bg-gray-100 text-gray-700 border-gray-300'
    default:
      return 'bg-gray-100 text-gray-700 border-gray-300'
  }
})

const label = computed(() => {
  switch (props.status) {
    case 'starting':
      return 'Starting'
    case 'running':
      return 'Running'
    case 'crashed':
      return 'Crashed'
    case 'exited':
      return 'Exited'
    default:
      return ''
  }
})
</script>

<template>
  <span
    class="inline-flex items-center px-2 py-0.5 text-xs font-medium border rounded"
    :class="cls"
  >
    <span
      class="w-1.5 h-1.5 rounded-full mr-1"
      :class="{
        'bg-blue-500 animate-pulse': status === 'starting',
        'bg-green-500': status === 'running',
        'bg-red-500': status === 'crashed',
        'bg-gray-400': status === 'exited',
      }"
    />
    {{ label }}
  </span>
</template>
