<template>
  <UDropdown :items="items" :popper="{ placement: 'bottom-end' }">
    <UButton
      :label="user?.displayName || user?.username"
      variant="ghost"
      class="p-2"
    >
      <template v-if="user?.avatarUrl" #leading>
        <UAvatar :src="user.avatarUrl" size="2xs" />
      </template>
      <template v-else #leading>
        <div
          class="w-6 h-6 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center text-xs font-medium text-indigo-700 dark:text-indigo-300"
        >
          {{ (user?.displayName || user?.username || 'U').charAt(0).toUpperCase() }}
        </div>
      </template>
    </UButton>

    <template #item="{ item }">
      <span>{{ item.label }}</span>
    </template>
  </UDropdown>
</template>

<script setup lang="ts">
const { user, logout } = useAuth()

const items = computed(() => [
  [
    {
      label: '退出登录',
      icon: 'i-heroicons-arrow-right-start-on-rectangle',
      click: () => logout(),
    },
  ],
])
</script>
