@props(['games' => []])

<section class="dashboard-section popular-games" aria-labelledby="popular-games-title">
    <div class="panel-header">
        <h2 class="section-title" id="popular-games-title">Popular Games</h2>
        <a href="{{ route('games.index') }}" class="panel-link">View all</a>
    </div>
    <div class="h-scroll" role="list" tabindex="0" aria-label="Popular games" data-h-scroll>
        @forelse($games as $game)
            <x-game.card :game="$game" />
        @empty
            <p class="text-muted px-4 pb-4 mb-0">No games available yet.</p>
        @endforelse
    </div>
</section>
