@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-4 items-baseline">
        <p class="font-bold mb-2">Broker Contact</p>
        <x-ui.button-sm data-is-loading="false"  data-followed="{{$is_followed ? 'true' : 'false'}}" onclick="follow(this, {{$broker->role_id ?? ''}})" 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>
    </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>