@php use App\Enums\UserTypes; @endphp
@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 === 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

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