<template>
    <div class="flex flex-col p-4 rounded-xl border" 
         :class="status === 'Enabled' ? 'bg-rose-900/10 border-rose-800/30' : 'bg-emerald-900/10 border-emerald-800/30'">
      <span class="text-[10px] font-bold text-slate-500 uppercase mb-1">{{ label }}</span>
      <div class="flex items-center space-x-2">
        <div class="w-2 h-2 rounded-full" :class="status === 'Enabled' ? 'bg-rose-500 shadow-[0_0_8px_rgba(244,63,94,0.6)]' : 'bg-emerald-500'"></div>
        <span class="text-sm font-black" :class="status === 'Enabled' ? 'text-rose-400' : 'text-emerald-400'">
          {{ status === 'Enabled' ? 'ACTIVE' : 'DISABLED' }}
        </span>
      </div>
    </div>
</template>

<script setup>
defineProps(['label', 'status']);
</script>
