<template>
  <span
    class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium"
    :class="badgeClass"
  >
    <span class="w-1.5 h-1.5 rounded-full" :class="dotClass"></span>
    {{ label }}
  </span>
</template>

<script setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

const props = defineProps({
  status: {
    type: String,
    required: true,
    validator: (v) => ['running', 'stopped', 'starting', 'stopping', 'error'].includes(v),
  },
})

const { t } = useI18n()

const statusConfig = {
  running: {
    badge: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',
    dot: 'bg-green-500',
    label: 'sites.status.running',
  },
  stopped: {
    badge: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
    dot: 'bg-gray-500',
    label: 'sites.status.stopped',
  },
  starting: {
    badge: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400',
    dot: 'bg-blue-500 animate-pulse',
    label: 'sites.status.starting',
  },
  stopping: {
    badge: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400',
    dot: 'bg-yellow-500 animate-pulse',
    label: 'sites.status.stopping',
  },
  error: {
    badge: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400',
    dot: 'bg-red-500',
    label: 'sites.status.error',
  },
}

const config = computed(() => statusConfig[props.status] || statusConfig.stopped)
const badgeClass = computed(() => config.value.badge)
const dotClass = computed(() => config.value.dot)
const label = computed(() => t(config.value.label))
</script>
