<script setup lang="ts">
  import { useRouter } from "vue-router";
  import { LogOut } from "lucide-vue-next";
  import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
  import { Button } from "@/components/ui/button";
  import { useAuthStore } from "@/stores/auth";
  import { computed } from "vue";

  // Auth store
  const authStore = useAuthStore();

  // Get user data from auth store
  const userData = computed(() => {
    if (!authStore.user) {
      return {
        name: "Guest User",
        role: "Guest",
        avatar: "",
        initials: "GU",
      };
    }

    return {
      name: authStore.user.username || "User",
      role: authStore.user.role || "User",
      avatar: "",
      initials: authStore.user.username
        ? authStore.user.username.substring(0, 2).toUpperCase()
        : "U",
    };
  });

  // Initialize router
  const router = useRouter();
  const logout = () => {
    authStore.logout();
  };
</script>

<template>
  <div class="flex items-center justify-between space-x-3 p-4">
    <div class="flex items-center space-x-3">
      <Avatar>
        <AvatarImage :src="userData.avatar" alt="User avatar" />
        <AvatarFallback>{{ userData.initials }}</AvatarFallback>
      </Avatar>
      <div>
        <p class="text-sm font-medium text-gray-900">
          {{ userData.name }}
        </p>
        <p class="text-xs text-gray-500">
          {{ userData.role }}
        </p>
      </div>
    </div>
    <Button
      variant="ghost"
      size="sm"
      @click="logout"
      class="h-8 w-8 p-0"
      aria-label="Logout">
      <LogOut class="h-4 w-4" />
    </Button>
  </div>
</template>
