@props([
    'guard' => '',
    'menuItems' => [],
    'logoutRoute' => false,
])

@php
    $dd = 'min-w-[160px] animate-fade-in rounded-xl border border-border bg-card py-1 shadow-soft dark:bg-card';
    $ddi = 'flex cursor-pointer items-center gap-2 px-4 py-2 text-sm text-foreground transition-colors duration-150 hover:bg-muted';
    $guard = $guard ?: config('auth.defaults.guard');
    $user = auth()->guard($guard)->user();

    // Dynamic details (always safe)
    $avatar = $user?->avatar ?? null;
    $fullName = $user?->full_name ?? $user?->name ?? '';
    $email = $user?->email ?? '';
    $isLoggedIn = !is_null($user);
@endphp

<div x-data="dropdown({ align: 'right', lockScroll: false })" class="relative">
    <button
        type="button"
        data-dropdown-trigger
        x-ref="trigger"
        @click="toggle()"
        class="flex items-center gap-2 rounded-xl py-1.5 pl-1 pr-3 transition-colors duration-200 hover:bg-muted">
        <x-utility.avatar
            :src="$avatar"
            :name="$fullName ?: 'User'"
            size="sm"
        />
        <div class="hidden text-left sm:block">
            <p class="text-sm font-medium leading-none text-foreground w-12 truncate profile-name">
                {{ $fullName ?: 'User' }}
            </p>
        </div>
        <x-heroicon-o-chevron-down class="h-4 w-4" />
    </button>

    <div
        x-ref="menu"
        x-show="open"
        x-cloak
        x-transition:enter="transition-opacity ease-out duration-100"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition-opacity ease-in duration-75"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        :class="placement === 'top' ? 'origin-bottom-right' : 'origin-top-right'"
        class="{{ $dd }} w-52">
        @if($isLoggedIn)
        <div class="border-b border-border px-4 py-3">
            <p class="text-sm font-medium text-foreground truncate profile-name">{{ $fullName ?: 'User' }}</p>
            <p class="truncate text-xs text-muted-foreground profile-email">{{ $email ?: 'user@example.com' }}</p>
        </div>
        @endif

        
        @if(!empty($menuItems))
            @foreach ($menuItems as $item)
                @if(!empty($item['click']))
                    <a href="{{ isset($item['route']) && (!empty($item['route']) && $item['route'] !== 'javascript:void(0)' && $item['route'] !== '#') ? route($item['route']) : ($item['url'] ?? '#') }}" class="{{ $ddi }}"
                    @click="{{ $item['click'] }}"
                    >
                        @if(isset($item['icon']))
                            <x-dynamic-component :component="$item['icon']" class="{{$item['icon-class'] ?? 'h-4 w-4'}}" />
                        @endif
                        {{ $item['label'] }}
                    </a>
                @else
                    <a href="{{ isset($item['route']) && (!empty($item['route']) && $item['route'] !== 'javascript:void(0)' && $item['route'] !== '#') ? route($item['route']) : ($item['url'] ?? '#') }}" class="{{ $ddi }}">
                        @if(isset($item['icon']))
                            <x-dynamic-component :component="$item['icon']" class="{{$item['icon-class'] ?? 'h-4 w-4'}}" />
                        @endif
                        {{ $item['label'] }}
                    </a>
                @endif
            @endforeach
            <span class="border-t block mt-1"></span>
        @endif

        @if($logoutRoute)
        <div class="border-border pt-1">
            <form method="POST" action="{{ $logoutRoute }}">
                @csrf
                <button type="submit" class="{{ $ddi }} w-full text-left text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950/30">
                    <x-heroicon-o-arrow-right-on-rectangle class="h-4 w-4" />
                    Sign out
                </button>
            </form>
        </div>
        @endif
        
    </div>
</div>