@extends('layouts.user')

@section('title', 'Followers')

@section('content')
<div class="max-w-3xl mx-auto px-4 py-6">
    <div class="flex items-center justify-between mb-4">
        <h1 class="text-lg font-semibold text-slate-900">Followers</h1>
    </div>

    <div class="space-y-3">
        @forelse($list as $follow)
            @php
                $user = $follow->follower;
            @endphp
            <a href="{{ route('user.profile.view', $user) }}" class="block bg-white rounded-md border border-gray-100 px-5 py-4 text-sm hover:border-slate-200">
                <div class="flex items-start justify-between gap-2">
                    <div class="min-w-0">
                        <h2 class="text-base font-semibold text-slate-900">{{ $user?->name ?? 'Unknown' }}</h2>
                        <p class="text-xs text-slate-600">{{ $user?->nurseProfile?->specialty ?? 'Healthcare Professional' }}</p>
                        @if($user?->nurseProfile?->city || $user?->nurseProfile?->country)
                            <p class="text-xs text-slate-500">
                                {{ $user?->nurseProfile?->city ? $user->nurseProfile->city . ', ' : '' }}{{ $user?->nurseProfile?->country }}
                            </p>
                        @endif
                    </div>
                    <span class="text-xs text-slate-500 whitespace-nowrap">{{ $follow->created_at?->diffForHumans() }}</span>
                </div>
            </a>
        @empty
            <div class="bg-white rounded-md border border-gray-100 px-5 py-4 text-sm text-slate-600">
                No followers yet.
            </div>
        @endforelse
    </div>

    <div class="mt-4">
        {{ $list->links() }}
    </div>
</div>
@endsection