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

<section class="rail-panel" aria-labelledby="live-matches-title">
    <div class="panel-header">
        <h2 class="section-title" id="live-matches-title">Live Matches</h2>
    </div>
    <div>
        @forelse($matches as $match)
            <article class="live-match">
                <div>
                    <div class="live-match__meta">{{ $match['game'] ?? 'Esports' }} · {{ $match['stage'] ?? 'Match' }}</div>
                    <div class="live-match__teams">{{ $match['team_a'] ?? 'Team A' }} vs {{ $match['team_b'] ?? 'Team B' }}</div>
                </div>
                <div class="live-match__score">
                    <div class="live-match__score-val score-value">{{ ($match['score_a'] ?? 0) }}-{{ ($match['score_b'] ?? 0) }}</div>
                    @if(!empty($match['is_live']))
                        <div class="live-match__live"><span>Live</span></div>
                    @endif
                </div>
            </article>
        @empty
            <p class="text-muted px-4 pb-4 mb-0 fs-sm">No live matches right now.</p>
        @endforelse
    </div>
</section>
