<template>
  <div v-if="profile" class="profile-badge">
    <GnAvatar v-if="showAvatar" size="sm" :initials="initials(profile.name)" />
    <GnBadge :variant="variant">{{ profile.name }}</GnBadge>
  </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)

// Kit badge variants per profile colour identity.
const BADGE_VARIANTS = {
  secretary: 'secondary',
  server_admin: 'warning',
  developer: 'info',
}

const variant = computed(() => BADGE_VARIANTS[props.profileId] || 'secondary')

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