<script setup>
const dataStore = useDataStore()
const profileStore = useProfileStore()
const supabase = useSupabaseClient()

const selectedProfile = ref(profileStore.activeProfile.id)


</script>

<template>
  <USelectMenu
    :options="profileStore.ownProfiles"
    value-attribute="id"
    class="w-40"
    @change="profileStore.changeProfile(selectedProfile)"
    v-model="selectedProfile"
  >
    <UButton color="gray" variant="ghost" :class="[open && 'bg-gray-50 dark:bg-gray-800']" class="w-full">
      <UAvatar :alt="profileStore.tenants.find(i => profileStore.profiles.find(i => i.id === selectedProfile).tenant === i.id).name" size="md" />

      <span class="truncate text-gray-900 dark:text-white font-semibold">{{profileStore.tenants.find(i => profileStore.profiles.find(i => i.id === selectedProfile).tenant === i.id).name}}</span>
    </UButton>

    <template #option="{option}">
      {{profileStore.tenants.find(i => i.id === option.tenant).name}}
    </template>
  </USelectMenu>
</template>