<template>
  <div v-if="profile" class="profile-badge">
    <GnAvatar v-if="showAvatar" size="sm" :initials="initials(profile.name)" />
    <span class="profile-badge-name">{{ profile.name }}</span>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useProfilesStore } from '@/stores/profiles.js'

const props = defineProps({
  profileId: { type: String, default: null },
  showAvatar: { type: Boolean, default: true }
})

const profilesStore = useProfilesStore()
const profile = computed(() => props.profileId ? profilesStore.getProfile(props.profileId) : null)

function initials(name) {
  if (!name) return '?'
  return name.split(/\s+/).map(w => w[0]).join('').slice(0, 2).toUpperCase()
}
</script>