<template>
  <UCard v-if="user" class="w-full">
    <div class="flex items-center gap-4">
      <UAvatar
        :src="user.avatar"
        :alt="user.name || user.username"
        size="xl"
      />
      <div class="flex-1">
        <h3 class="font-semibold text-lg">{{ user.name || user.username }}</h3>
        <p class="text-sm text-[var(--brand-text-muted)]">{{ user.email }}</p>
        <p class="text-xs text-[var(--brand-text-muted)] mt-1">ID: {{ user.uid }}</p>
      </div>
    </div>
  </UCard>
</template>

<script setup lang="ts">
const { user } = useAuthentik()
</script>
