<script setup lang="ts">
import type { DropdownMenuItem } from '@nuxt/ui'

defineProps<{
    collapsed?: boolean
}>()

const locations = ref([{
    label: 'Xanten',
    avatar: {
        alt: 'Xanten'
    }
},
{
    label: 'Bonn',
    avatar: {
        alt: 'Bonn'
    }
},])
const selectedTeam = ref(locations.value[0])

const items = computed<DropdownMenuItem[][]>(() => {
    return [locations.value.map(team => ({
        ...team,
        onSelect() {
            selectedTeam.value = team
        }
    })),]
})
</script>

<template>
    <UDropdownMenu :items="items" :content="{ align: 'center', collisionPadding: 12 }"
        :ui="{ content: collapsed ? 'w-40' : 'w-(--reka-dropdown-menu-trigger-width)' }">
        <UButton v-bind="{
            ...selectedTeam,
            label: collapsed ? undefined : selectedTeam?.label,
            trailingIcon: collapsed ? undefined : 'i-lucide-chevrons-up-down'
        }" color="neutral" variant="ghost" block :square="collapsed" class="data-[state=open]:bg-elevated"
            :class="[!collapsed && 'py-2']" :ui="{
                trailingIcon: 'text-dimmed'
            }" />
    </UDropdownMenu>
</template>
