@props(['profiles'])

{{-- Display a profile card for each profile --}}
{{-- Using Bootstrap card component for styling --}}

<div class="col-md-4 mb-4"> <!-- 12 / 4 = 3 كروت في السطر -->
    <div class="card h-100">
        <img src="https://picsum.photos/200/300" style="height: 200px; object-fit: cover;" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">{{ $profiles->name }}<br>{{ $profiles->email }}</h5>
            <p class="card-text">{{ Str::limit($profiles->bio, 50) }}</p>
            <a href="{{ route('profile.show', $profiles->id) }}" class="btn btn-primary">View Profile</a>
        </div>
    </div>
</div>