<script setup>
const auth = useAuthStore()

const userItems = computed(() => [[
  {
    label: 'Passwort aendern',
    icon: 'i-heroicons-shield-check',
    to: '/password-change'
  },
  {
    label: 'Abmelden',
    icon: 'i-heroicons-arrow-left-on-rectangle',
    onSelect: async () => {
      await auth.logout()
    }
  }
]])
</script>

<template>
  <UDropdownMenu
    :items="userItems"
    :content="{ align: 'start', side: 'top', sideOffset: 8 }"
    :ui="{ content: 'w-[var(--reka-dropdown-menu-trigger-width)] max-w-[var(--reka-dropdown-menu-trigger-width)]' }"
    class="block w-full"
  >
    <template #default="{ open }">
      <UButton
        color="gray"
        variant="ghost"
        class="w-full min-w-0 justify-start gap-2 rounded-lg px-2.5 py-2 text-left transition-colors hover:bg-gray-100 dark:hover:bg-gray-800"
        :class="[open && 'bg-gray-100 dark:bg-gray-800']"
      >
        <div class="flex items-space gap-2">
          <span class="min-w-0 flex-1 truncate font-medium text-gray-900 dark:text-white">
          {{ auth.user.email }}
        </span>
          <UIcon name="i-heroicons-ellipsis-vertical" class="h-5 w-5 shrink-0" />
        </div>

      </UButton>
    </template>
  </UDropdownMenu>
</template>
