@props(['profileLink' => ''])
<div class="flex items-center">
    @auth
    <div class="relative group">
        <x-ui.button icon="user-circle" class="cursor-pointer" onclick="showMenu(this)"></x-ui.button>
        <ul class="menu opacity-0 z-10 scale-10 group-hover:scale-100 group-hover:opacity-100 transition-all duration-300 ease-in-out w-48 absolute right-0  bg-white border border-gray-300 rounded-md shadow-xl py-2 text-accent-600">
            <li class="py-2 px-4 hover:bg-gray-100 hover:text-gray-900 hover:cursor-pointer hover:font-bold">
                <a href="{{$profileLink}}" class="flex space-x-4">
                    <div class="p-1 bg-gray-200 rounded-xl text-gray-900">
                        <x-heroicon-o-user class="w-4"/>
                    </div>
                    <p>Profile</p>
                </a>
            </li>

            @if(auth()->check() && auth()->user()->role === \App\Enums\UserTypes::Broker->value)
                <li class="py-2 px-4 hover:bg-gray-100 hover:text-gray-900 hover:cursor-pointer hover:font-bold">
                    <a href="{{route('broker.dashboard')}}" class="flex space-x-4">
                        <div class="p-1 bg-gray-200 rounded-xl text-gray-900">
                            <x-heroicon-o-adjustments-horizontal class="w-4"/>
                        </div>
                        <p>Control Panel</p>
                    </a>
                </li>
                <li class="py-2 px-4 hover:bg-gray-100 hover:text-gray-900 hover:cursor-pointer hover:font-bold">
                    <a href="{{route('chat')}}" class="flex space-x-4">
                        <div class="p-1 bg-gray-200 rounded-xl text-gray-900">
                            <x-heroicon-o-chat-bubble-left-right class="w-4"/>
                        </div>
                        <p>Chat</p>
                    </a>
                </li>
            @endif

        </ul>
    </div>
    @endauth
    @guest
        <x-ui.button variant="neutral" link="{{route('login.create')}}">
            <p>Login </p>
        </x-ui.button>
    @endguest

    @auth
        <form method="post" action="{{route('logout')}}">
            @csrf
            @method('delete')
            <x-ui.button
                class="flex space-x-3 hover:bg-red-50 hover:border-red-100 hover:text-red-500 border border-white">
                <x-heroicon-o-arrow-right-start-on-rectangle class="w-4 stroke-2 mr-2"/>
                <p class="hidden sm:block">Logout</p>
            </x-ui.button>
        </form>
    @endauth
</div>