@props(['teams'])

<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
    @forelse ($teams as $team)
        <div class="relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
            <a href="{{ route('team.profile.details', $team->username) }}" class="block">
                <!-- Background Image with Overlay -->
                <div class="relative aspect-square">
                    <img
                        class="w-full h-full object-cover"
                        src="{{ getFile($team->image) }}"
                        alt="{{ $team->name }}"
                    >
                    <!-- Gradient Overlay -->
                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>

                    <!-- Content Overlay -->
                    <div class="absolute inset-0 flex flex-col items-center justify-end p-6 text-white">
                        <!-- Profile Image -->
                        <div class="mb-4">
                            <img
                                class="w-24 h-24 rounded-full border-4 border-white shadow-lg object-cover"
                                src="{{ getFile($team->image) }}"
                                alt="{{ $team->name }}"
                            >
                        </div>

                        <!-- Team Name -->
                        <h3 class="text-xl font-bold text-center mb-1">{{ $team->name }}</h3>

                        <!-- Username -->
                        <p class="text-sm text-gray-200 mb-3">{{ '@' . $team->username }}</p>

                        <!-- Stats -->
                        <div class="flex gap-4 items-center">
                            <!-- Followers -->
                            <div class="text-center">
                                <p class="text-lg font-bold">{{ $team->followers ?? '0' }}</p>
                                <p class="text-xs text-gray-300">{{ __('followers') }}</p>
                            </div>

                            <!-- Divider -->
                            <div class="w-px h-8 bg-white/30"></div>

                            <!-- Province -->
                            <div class="text-center">
                                <p class="text-sm font-semibold">{{ $team->province->name ?? __('N/A') }}</p>
                                <p class="text-xs text-gray-300">{{ __('province') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    @empty
        <div class="col-span-full text-center p-12">
            <div class="text-gray-500">
                <svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
                </svg>
                <p class="text-lg font-medium">{{ __('Nothing to show here yet, Please check back later!') }}</p>
            </div>
        </div>
    @endforelse
</div>

@pushonce('styles')
    <style>
        /* Optional: Add hover effect for cards */
        .group:hover img {
            transform: scale(1.05);
            transition: transform 0.3s ease-in-out;
        }
    </style>
@endpushonce