@props([
    'matches',
    'tableId',
    'title' => 'Meccsek',
    'type' => 'past', // 'past', 'future', 'overall'
    'filterType' => 'one-zero', // 'one-zero', 'one-one', 'two-one', 'draw', 'overall'
    'showStreak' => true,
    'showResult' => true,
    'showCorrectScoreOdds' => true,
    'correctScoreLabel' => '1 1:0',
    'correctScoreLabels' => null // For multiple labels (e.g., 2-1 filter: ['1 2:1', '2 1:2'])
])

@php
    $isPast = $type === 'past';
    $isOverall = $filterType === 'overall';
    // Use labels array if provided, otherwise create array from single label
    $labelsArray = $correctScoreLabels ?? [$correctScoreLabel];
    // Create header text from labels
    $headerLabels = array_map(function($label) {
        return str_replace(['1 ', '2 ', 'Draw '], '', $label);
    }, $labelsArray);
    $headerText = implode(' / ', $headerLabels) . ' Odds';
@endphp

<div class="filter-card">
    <div class="filter-card-header">{{ $title }}</div>
    <div class="filter-card-body">
        @if($isPast && $showStreak)
        <div class="mobile-sort-buttons">
            <button class="mobile-sort-button" data-sort="date" data-table="{{ $tableId }}">
                Rendezés dátum szerint
            </button>
            <button class="mobile-sort-button" data-sort="streak" data-table="{{ $tableId }}">
                Rendezés sorozat szerint
            </button>
        </div>
        @endif

        <div class="filter-table-wrapper">
            <table class="filter-table display" id="{{ $tableId }}">
                <thead>
                    <tr>
                        <th>Hazai csapat</th>
                        <th>Vendég csapat</th>
                        @if(!$isOverall)
                            <th class="desktop-only">Megfelelt?</th>
                            @if($showStreak && $isPast)
                                <th class="desktop-only">Sorozat</th>
                            @endif
                            @if($showResult && $isPast)
                                <th>Végeredmény</th>
                            @endif
                        @else
                            @if($isPast)
                                <th>Végeredmény</th>
                            @endif
                        @endif
                        <th class="desktop-only">Forduló</th>
                        <th class="desktop-only">Meccs kezdete</th>
                        @if(!$isOverall)
                            <th>Odds</th>
                            @if($showCorrectScoreOdds)
                                <th>{{ $headerText }}</th>
                            @endif
                        @else
                            @if($showStreak && $isPast)
                                <th class="desktop-only">Hanyadik a sorozatban?</th>
                            @endif
                            <th>1:1 Szűrés</th>
                            <th>1:0 Szűrés</th>
                            <th>2:1 Szűrés</th>
                        @endif
                    </tr>
                </thead>
                <tbody>
                    @foreach($matches as $match)
                        @if($isOverall)
                            <x-filters.match-row-overall
                                :match="$match"
                                :type="$type"
                                :showStreak="$showStreak"
                            />
                        @else
                            <x-filters.match-row
                                :match="$match"
                                :type="$type"
                                :filterType="$filterType"
                                :showStreak="$showStreak"
                                :showResult="$showResult"
                                :showCorrectScoreOdds="$showCorrectScoreOdds"
                                :correctScoreLabels="$labelsArray"
                            />
                        @endif
                    @endforeach
                </tbody>
            </table>
        </div>

        {{ $slot ?? '' }}
    </div>
</div>