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

<script setup lang="ts">
interface Props {
  status: 'connected' | 'disconnected' | 'connecting' | 'qr_ready' | 'pairing'
}

const props = defineProps<Props>()

const statusConfig: Record<string, { label: string; class: string }> = {
  connected: {
    label: 'Conectado',
    class: 'bg-green-500/20 text-green-400'
  },
  disconnected: {
    label: 'Desconectado',
    class: 'bg-red-500/20 text-red-400'
  },
  connecting: {
    label: 'Conectando...',
    class: 'bg-blue-500/20 text-blue-400'
  },
  qr_ready: {
    label: 'Escanear QR',
    class: 'bg-amber-500/20 text-amber-400'
  },
  pairing: {
    label: 'Emparejando...',
    class: 'bg-purple-500/20 text-purple-400'
  }
}

const label = computed(() => statusConfig[props.status]?.label || props.status)
const badgeClass = computed(() => statusConfig[props.status]?.class || 'bg-gray-500/20 text-gray-400')
</script>
