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

@if ($recommendedCategories)
    {{-- Slides one card to the left every step set in Admin > Settings > Storefront; the script in saruar-mart.min.js runs it. --}}
    <section class="container py-4 sm-recommended" aria-labelledby="recommended-heading" data-saruar-slider data-interval="{{ \App\Services\SettingsService::categorySliderSeconds($storefront ?? []) }}">
        <div class="d-flex flex-wrap align-items-end gap-2 mb-3">
            <div class="me-auto">
                <span class="badge sm-eyebrow">Categories</span>
                <h2 class="h4 mt-2 mb-0" id="recommended-heading">Recommended Categories</h2>
            </div>
            <span id="saruarFilterStatus" class="badge rounded-pill text-bg-light border" hidden></span>
            <button id="saruarResetCategoryFilter" class="btn btn-sm btn-outline-secondary" type="button" hidden>Reset</button>
        </div>

        <ul id="saruarRecommendedGrid" class="list-unstyled sm-slider-track mb-0" data-slider-track>
            @foreach ($recommendedCategories as $category)
                <li class="sm-category-slide" data-category-item data-category-name="{{ $category['name'] }}" data-category-group="recommended">
                    <a class="saruar-category-card" href="{{ route('storefront.category.show', $category['slug']) }}">
                        <i class="bi {{ $category['icon_class'] }}" aria-hidden="true"></i>
                        <span>{{ $category['name'] }}</span>
                    </a>
                </li>
            @endforeach
        </ul>
    </section>
@endif