@props(['profileLink' => ''])
<div class="flex items-center">
    <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()->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>
            @endif

        </ul>
    </div>
    <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>
</div>