@extends('layouts.app')

@section('content')
<div class="max-w-6xl mx-auto p-6" dir="rtl">
    <h1 class="text-2xl font-bold text-blue-900 mb-6 text-center">الأشخاص الأكثر توافقًا معك</h1>

    @if($suggested->count() > 0)
        <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
            @foreach($suggested as $match)
                @include('frontend.components.member-card', ['user' => $match])
            @endforeach
        </div>
    @else
        <div class="text-center py-12 border border-dashed border-gray-300 dark:border-gray-600 rounded-xl">
            <p class="text-gray-500 dark:text-gray-300 mb-2">لا توجد مطابقات حالياً.</p>
            <p class="text-[12px] text-gray-400">اكمل بيانات ملفك الشخصي لتحصل على مطابقات أفضل.</p>
            <a href="{{ route('profile.edit') }}" class="mt-4 inline-block px-6 py-2 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-bold rounded-full hover:from-purple-700 hover:to-pink-700 transition-all">
                أكمل ملفك الآن
            </a>
        </div>
    @endif
</div>
@endsection