@props(['course', 'scope'])
@php
    $modes = [
        ['flashcards', 'book', 'Cartes'],
        ['qcm', 'target', 'QCM'],
        ['open', 'pen', 'Écrire'],
        ['infinite', 'infinity', 'Infini'],
    ];
@endphp
<div {{ $attributes->merge(['class' => 'grid grid-cols-2 gap-2 sm:grid-cols-4']) }}>
    @foreach ($modes as [$mode, $icon, $label])
        <a href="{{ route('study.play', [$course, $scope, $mode]) }}"
           class="flex items-center justify-center gap-1.5 rounded-xl px-3 py-2.5 text-xs font-semibold transition hover:-translate-y-0.5"
           style="background:color-mix(in oklab,#fff 4%,transparent);border:1px solid var(--color-line);color:var(--color-ink-soft)"
           onmouseover="this.style.borderColor='color-mix(in oklab,var(--color-primary) 50%,transparent)';this.style.color='var(--color-ink)'"
           onmouseout="this.style.borderColor='var(--color-line)';this.style.color='var(--color-ink-soft)'">
            <x-icon :name="$icon" :size="15" /> {{ $label }}
        </a>
    @endforeach
</div>