@props(['connection'])

<div class="bg-white rounded-lg shadow p-4 mb-4">
    <div class="flex items-start justify-between">
        <div class="flex items-start space-x-3">
            <img src="{{ $connection->requester->nurseProfile?->profile_photo_url ?? asset('images/default-avatar.png') }}" 
                 alt="{{ $connection->requester->name }}" class="w-12 h-12 rounded-full">
            
            <div class="flex-grow">
                <h3 class="font-semibold text-gray-900">{{ $connection->requester->name }}</h3>
                <p class="text-sm text-gray-600">{{ $connection->requester->nurseProfile?->primary_specialty ?? 'User' }}</p>
                <p class="text-xs text-gray-500 mt-1">from {{ $connection->requester->nurseProfile?->country ?? 'Unknown' }}</p>
            </div>
        </div>
        
        <div class="flex space-x-2">
            <form action="{{ route('nurse.connect.respond', $connection) }}" method="POST" style="display: inline;">
                @csrf
                <input type="hidden" name="status" value="accepted">
                <button type="submit" class="px-4 py-2 bg-blue-500 text-white text-sm rounded-lg hover:bg-blue-600 transition">
                    Accept
                </button>
            </form>
            
            <form action="{{ route('nurse.connect.respond', $connection) }}" method="POST" style="display: inline;">
                @csrf
                <input type="hidden" name="status" value="rejected">
                <button type="submit" class="px-4 py-2 bg-gray-200 text-gray-800 text-sm rounded-lg hover:bg-gray-300 transition">
                    Decline
                </button>
            </form>
        </div>
    </div>
</div>