@props([
    'id' => 'mobileSwiper',
    'showNavigation' => true,
    'showPagination' => false,
])

<div {{ $attributes->merge(['class' => 'my-6 block md:hidden w-full']) }}>
  <div id="{{ $id }}" class="swiper relative" data-mobile-swiper>
    <div class="swiper-wrapper">
      {{ $slot }}
    </div>

    @if ($showNavigation)
      {{-- Navigation buttons --}}
      <div class="swiper-button-next !text-primary after:!text-lg"></div>
      <div class="swiper-button-prev !text-primary after:!text-lg"></div>
    @endif

    @if ($showPagination)
      {{-- Pagination --}}
      <div class="swiper-pagination"></div>
    @endif
  </div>
</div>