<template>
  <button
    type="button"
    class="sidebar-logout"
    :class="{ 'sidebar-logout--stacked': stacked }"
    :style="{ color }"
    @click="onLogout"
  >
    <SvgIcon name="power" :size="34" color="currentColor" />
    <span class="sidebar-logout__labels">
      <span class="sidebar-logout__title">خــروج</span>
      <span class="sidebar-logout__subtitle">Logout</span>
    </span>
  </button>
</template>

<script setup>
import { useRouter } from 'vue-router'
import useAuth from '@/composables/useAuth'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import { useLogoutMutation } from '@/services/query/auth'

defineProps({
  color: { type: String, default: '#9a9a9a' },
  stacked: { type: Boolean, default: false },
})

const router = useRouter()
const { clearSession } = useAuth()
const logoutMutation = useLogoutMutation()

const onLogout = async () => {
  try {
    await logoutMutation.mutateAsync()
  } catch {
    /* ignore */
  } finally {
    clearSession()
    router.push({ name: 'login' })
  }
}
</script>

<style lang="scss" scoped>
.sidebar-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.15s;

  &:hover {
    opacity: 1;
  }

  &__labels {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
  }

  &--stacked {
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.625rem 0.25rem;
  }

  &--stacked &__labels {
    align-items: center;
    text-align: center;
  }

  &__title {
    font-family: var(--font-family-fa);
    font-size: 1rem;
    font-weight: 500;
  }

  &__subtitle {
    font-size: 0.9375rem;
    opacity: 0.55;
  }
}
</style>
