@props([
    'dark' => false,
])

<x-ui.dropdown align="start" width="w-64" placement="top" {{ $attributes }}>
    <x-slot:trigger>
        <button
            type="button"
            data-test="sidebar-menu-button"
            @class([
                'flex w-full items-center gap-3 rounded-lg p-2 text-left transition-colors',
                'hover:bg-stone-900' => $dark,
                'hover:bg-stone-100 dark:hover:bg-stone-800' => ! $dark,
            ])
        >
            <x-ui.avatar :name="auth()->user()->name" :initials="auth()->user()->initials()" />
            <span class="min-w-0 flex-1">
                <span @class(['block truncate text-sm font-medium', 'text-white' => $dark, 'text-stone-900 dark:text-white' => ! $dark])>
                    {{ auth()->user()->name }}
                </span>
                <span @class(['block truncate text-xs', 'text-stone-400' => $dark, 'text-stone-500 dark:text-stone-400' => ! $dark])>
                    {{ auth()->user()->email }}
                </span>
            </span>
            <x-icon name="chevron-up-down" @class(['size-4 shrink-0', 'text-stone-500' => $dark, 'text-stone-400' => ! $dark]) />
        </button>
    </x-slot:trigger>

    <div class="flex items-center gap-3 px-3 py-2">
        <x-ui.avatar :name="auth()->user()->name" :initials="auth()->user()->initials()" />
        <div class="min-w-0 flex-1">
            <p class="truncate text-sm font-medium text-stone-900 dark:text-white">{{ auth()->user()->name }}</p>
            <p class="truncate text-xs text-stone-500 dark:text-stone-400">{{ auth()->user()->email }}</p>
        </div>
    </div>

    <x-ui.separator class="my-1.5" />

    <x-ui.dropdown-item :href="route('profile.edit')" wire:navigate>
        <x-icon name="cog" class="size-4 text-stone-400" />
        {{ __('Settings') }}
    </x-ui.dropdown-item>

    <form method="POST" action="{{ route('logout') }}">
        @csrf
        <x-ui.dropdown-item as="button" type="submit" class="cursor-pointer" data-test="logout-button">
            <x-icon name="logout" class="size-4 text-stone-400" />
            {{ __('Log out') }}
        </x-ui.dropdown-item>
    </form>
</x-ui.dropdown>