<template>
  <UCard class="w-full">
    <div class="flex flex-wrap gap-2">
      <!-- Estado de autenticación -->
      <UBadge
        :color="isAuthenticated ? 'success' : 'error'"
        size="lg"
        variant="subtle"
      >
        <template #leading>
          <UIcon :name="isAuthenticated ? 'i-heroicons-check-circle' : 'i-heroicons-x-circle'" />
        </template>
        {{ isAuthenticated ? 'Autenticado' : 'No autenticado' }}
      </UBadge>

      <!-- Estado de conexión -->
      <UBadge
        color="success"
        size="lg"
        variant="subtle"
      >
        <template #leading>
          <UIcon name="i-heroicons-signal" />
        </template>
        Conectado
      </UBadge>

      <!-- Número de grupos -->
      <UBadge
        v-if="user"
        color="primary"
        size="lg"
        variant="subtle"
      >
        <template #leading>
          <UIcon name="i-heroicons-user-group" />
        </template>
        {{ user.groups.length }} {{ user.groups.length === 1 ? 'Grupo' : 'Grupos' }}
      </UBadge>
    </div>
  </UCard>
</template>

<script setup lang="ts">
const { user, isAuthenticated } = useAuthentik()
</script>
