<template>
  <header class="border-b border-neutral-200 bg-primary-500 p-5 text-white">
    <div class="flex h-full items-center justify-end">
      <div class="flex gap-12 text-xl text-white">
        <div class="group relative flex gap-4">
          <Icon name="mdi:account-circle-outline" class="self-center cursor-pointer" size="36" />
          <p class="self-center cursor-pointer">{{ user?.username }}</p>
          <div class="invisible absolute right-0 top-full z-20 mt-2 w-44 rounded-md border border-neutral-200 bg-white py-1 text-sm text-neutral-800 opacity-0 shadow-lg transition-all group-hover:visible group-hover:opacity-100">
            <button
              type="button"
              class="block w-full px-3 py-2 text-left hover:bg-neutral-100"
            >
              Mon profil
            </button>
            <button
              type="button"
              class="block w-full px-3 py-2 text-left hover:bg-neutral-100"
              @click="handleLogout"
            >
              Déconnexion
            </button>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
import type { UserData } from '~/services/dto/user-data'

defineProps<{
  user?: UserData
}>()

const auth = useAuthStore()

const handleLogout = async () => {
  await auth.logout()
  await navigateTo('/login')
}
</script>
