<template>
  <UHeader :toggle="false">
    <template #left>
      <ULink to="/">
        <NuxtImg
          src="logo.png"
          alt="Logo"
          class="size-12"
        />
      </ULink>

      <ProfileLangSelect />
    </template>

    <template #right>
      <UColorModeButton />
      <AppNotifications v-if="isAuthenticated" />
      <UDropdownMenu :items="items">
        <ProfileAvatar
          size="xl"
        />
      </UDropdownMenu>
    </template>
  </UHeader>
</template>

<script setup lang="ts">
const { isAuthenticated } = storeToRefs(useUser())
const { signOut } = useUser()

const items = computed(() => {
  if (isAuthenticated.value) {
    return [[{
      label: 'Logout',
      icon: 'i-lucide-log-out',
      onSelect: () => {
        signOut()
        navigateTo('/')
      } }]
    ]
  } else {
    return [[{
      label: 'Sign In',
      icon: 'i-lucide-log-in',
      onSelect: () => {
        navigateTo('/login')
      } }]
    ]
  }
})
</script>
