@props(['disabledTitle' => 'Select a lead first'])

<button
    type="button"
    class="inline-flex items-center rounded-lg border px-2.5 py-1 text-xs font-semibold shadow-sm transition-colors enabled:hover:border-red-600 enabled:hover:bg-red-600 enabled:hover:text-white"
    :class="selectedLeadId !== null ? 'border-gray-200 bg-white text-gray-800' : 'cursor-not-allowed border-gray-100 bg-gray-50 text-gray-400'"
    :disabled="selectedLeadId === null"
    :title="selectedLeadId === null ? '{{ $disabledTitle }}' : 'Schedule an appointment for the selected lead'"
    x-on:click.stop="openAppointmentModal()"
>
    Make Appointment
</button>