@props(['showHint' => true])

<div class="relative">
    <!-- 스와이프 가능한 컨테이너 -->
    <div class="overflow-x-auto -mx-4 sm:mx-0 scrollbar-thin" data-table-swipe>
        <div class="inline-block min-w-full align-middle px-4 sm:px-0">
            {{ $slot }}
        </div>
    </div>

    <!-- 스와이프 힌트 (모바일에서만) -->
    @if($showHint)
    <div class="sm:hidden flex items-center justify-center gap-2 mt-2 text-xs text-gray-400 swipe-hint">
        <svg class="w-4 h-4 swipe-arrow-left" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l-4-4m0 0l4-4m-4 4h18"/>
        </svg>
        <span>좌우로 스와이프</span>
        <svg class="w-4 h-4 swipe-arrow-right" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
        </svg>
    </div>
    @endif
</div>