<template>
  <UButton
    color="error"
    size="lg"
    variant="solid"
    class="solid-button"
    @click="handleClick"
  >
    <template #leading>
      <UIcon name="i-heroicons-arrow-right-on-rectangle" />
    </template>
    Cerrar Sesión
  </UButton>
</template>

<script setup lang="ts">
const { logout } = useAuthentik()

const handleClick = () => {
  logout()
}
</script>

<style scoped>
.solid-button {
  box-shadow:
    0 4px 12px 0 rgba(239, 68, 68, 0.3),
    0 2px 4px 0 rgba(0, 0, 0, 0.2),
    inset 0 -2px 4px 0 rgba(0, 0, 0, 0.2),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.solid-button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 16px 0 rgba(239, 68, 68, 0.4),
    0 4px 8px 0 rgba(0, 0, 0, 0.25),
    inset 0 -2px 4px 0 rgba(0, 0, 0, 0.2),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
}

.solid-button:active {
  transform: translateY(0);
  box-shadow:
    0 2px 8px 0 rgba(239, 68, 68, 0.3),
    0 1px 2px 0 rgba(0, 0, 0, 0.2),
    inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
}
</style>
