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

const items = computed(() => [
  [{
    label: user.value?.email ?? '',
    disabled: true
  }],
  [{
    label: 'Watchlist',
    icon: 'i-lucide-heart',
    to: '/watchlist'
  },
  {
    label: 'Preferencias',
    icon: 'i-lucide-settings',
    to: '/settings'
  }],
  [{
    label: 'Cerrar sesion',
    icon: 'i-lucide-log-out',
    click: logout
  }]
])
</script>

<template>
  <div v-if="user">
    <UDropdownMenu :items="items">
      <UButton
        icon="i-lucide-user"
        color="neutral"
        variant="ghost"
        :label="user.email?.split('@')[0]"
      />
    </UDropdownMenu>
  </div>
  <UButton
    v-else
    to="/auth"
    label="Entrar"
    icon="i-lucide-log-in"
    variant="ghost"
    color="neutral"
  />
</template>
