@props(['name', 'selected' => null])

<div class="flex flex-col mb-4">
    <p class="mb-2 text-accent text-size-small-heading">2026</p>
    <div class="flex flex-wrap gap-2">
        @php
            $months = [
                'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio',
                'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'
            ];
        @endphp
        @foreach($months as $month)
            <label class="cursor-pointer group">
                <input type="radio" name="{{ $name }}" value="{{ $month }}" 
                    class="sr-only peer" {{ $selected == $month ? 'checked' : '' }}>
                <div class="text-center py-2 px-3 text-sm font-medium capitalize border rounded-lg transition-all 
                    peer-checked:bg-primary peer-checked:text-white peer-checked:border-accent
                    border-gray-200 text-black hover:border-accent">
                    {{ $month }}
                </div>
            </label>
        @endforeach
    </div>
</div>