@props(['broker', 'is_followed' => false])
<div {{$attributes->merge(['class' => "p-4 text-sm bg-gray-100 border-gray-200 border rounded-xl"])}}>
    <div class="flex space-x-2 items-center mb-2">
        <p class="font-bold">Broker Contact</p>
        <x-ui.button-sm data-is-loading="false" data-followed="{{$is_followed ? 'true' : 'false'}}"
                        onclick="follow(this, {{$broker->role_id ?? 0}})" class="followBtn group p-0! mt-0.5">
            <span class="group-data-[followed=true]:hidden text-blue-600">Follow</span>
            <span class="group-data-[followed=false]:hidden text-accent-600">Unfollow</span>
        </x-ui.button-sm>
        <x-ui.button-sm :link="route('chat.show', ['recipient' => $broker->id ?? 0])">
            <x-heroicon-o-chat-bubble-oval-left class="w-4 text-accent-600"/>
        </x-ui.button-sm>
    </div>
    <div class="text-accent-600 space-y-1">
        <p data-is-loading="false" class="broker-name">{{$broker->name ?? ''}}</p>
        <p data-is-loading="false" class="broker-email">{{$broker->email ?? ''}}</p>
        <p data-is-loading="false" class="broker-phone">{{$broker->role->phone ?? ''}}</p>
    </div>
</div>