<script setup>
const dataStore = useDataStore()

const tenants = ref(dataStore.getOwnProfile ? dataStore.getOwnProfile.tenants : [])
const tenant = ref(dataStore.currentTenant)


</script>

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

      <span class="truncate text-gray-900 dark:text-white font-semibold">{{ tenants.find(i => i.id === dataStore.currentTenant).name }}</span>
    </UButton>
  </USelectMenu>
</template>