<script setup lang="ts">
const { loggedIn, user, clear } = useUserSession()

const logout = async () => {
  await clear()
  await navigateTo('/api/auth/logout')
}
</script>

<template>
  <div class="user-menu">
    <div v-if="loggedIn" class="flex items-center gap-4">
      <div class="flex items-center gap-2">
        <UAvatar
          v-if="user?.picture"
          :src="user.picture"
          :alt="user.name"
          size="sm"
        />
        <UAvatar
          v-else
          :text="user?.name?.charAt(0)"
          size="sm"
        />
        <span class="text-sm font-medium">{{ user?.name }}</span>
      </div>

      <UButton
        color="red"
        variant="soft"
        size="sm"
        @click="logout"
      >
        Cerrar Sesión
      </UButton>
    </div>

    <UButton
      v-else
      color="primary"
      variant="solid"
      size="sm"
      to="/login"
    >
      Iniciar Sesión
    </UButton>
  </div>
</template>
