<template>
  <UCard class="w-full">
    <div class="flex flex-wrap gap-3">
      <!-- Botón de estado de sesión -->
      <UButton
        color="info"
        size="lg"
        variant="soft"
        @click="checkSessionStatus"
      >
        <template #leading>
          <UIcon name="i-heroicons-information-circle" />
        </template>
        Estado de Sesión
      </UButton>

      <!-- Botón de perfil -->
      <UButton
        color="primary"
        size="lg"
        @click="goToProfile"
      >
        <template #leading>
          <UIcon name="i-heroicons-user-circle" />
        </template>
        Ver Perfil
      </UButton>

      <!-- Botón de logout -->
      <UButton
        color="error"
        size="lg"
        variant="soft"
        @click="logout"
      >
        <template #leading>
          <UIcon name="i-heroicons-arrow-right-on-rectangle" />
        </template>
        Cerrar Sesión
      </UButton>
    </div>
  </UCard>
</template>

<script setup lang="ts">
const { logout, goToProfile, checkSessionStatus } = useAuthentik()
</script>
