@props([
    'name',
])

<div
    x-data="{ open: false }"
    @click.outside="open = false"
    {{ $attributes->merge(['class' => 'relative']) }}
>
    <button
        type="button"
        class="inline-flex items-center gap-2 rounded-[var(--radius-md)] px-2 py-1.5 text-sm text-[var(--color-text)] hover:bg-[var(--color-bg)]"
        @click="open = !open"
        :aria-expanded="open"
    >
        <x-ui.avatar :name="$name" size="sm" />
        <span class="hidden sm:inline font-medium">{{ $name }}</span>
        <x-ui.icon name="chevron-down" class="h-4 w-4 text-[var(--color-text-muted)]" />
    </button>

    <div
        x-show="open"
        x-cloak
        x-transition
        class="absolute right-0 z-40 mt-2 min-w-[12rem] rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-card)] py-1 shadow-[var(--shadow-md)]"
        role="menu"
    >
        {{ $slot }}
    </div>
</div>