<template>
  <span v-if="profile" class="profile-badge">
    <i class="ph ph-user-circle"></i>
    {{ profile.name }}
  </span>
</template>

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

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

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