@props(['actionColor', 'actionUrl'])

<div class="flex items-center justify-between bg-white rounded-lg shadow-sm p-3 mb-2 service-card">
    <div class="flex items-center flex-grow">
        <div class="w-8 h-8 mr-3 flex-shrink-0 flex items-center justify-center">
            {{ $icon }}
        </div>
        <span class="text-sm font-semibold text-gray-800 leading-tight">{{ $title ?? '' }}</span>
    </div>
    <Link modal href="{{$actionUrl}}" class="ml-2 px-3 py-1 rounded-full text-white text-xs font-medium {{ $actionColor }} flex-shrink-0">
        Start
    </Link>
</div>