@props(['sortable' => false, 'direction' => null, 'field' => null])

<th {{ $attributes->merge(['class' => 'px-4 py-3 font-semibold text-gray-700 dark:text-gray-300' . ($sortable ? ' cursor-pointer select-none' : '')]) }}
    @if($sortable && $field) wire:click="sortBy('{{ $field }}')" @endif>
    <div class="flex items-center space-x-1">
        <span>{{ $slot }}</span>
        
        @if($sortable && $field)
            <span class="flex flex-col text-[8px] ml-1 text-gray-500 dark:text-gray-400">
                @if($direction === 'asc')
                    <svg class="w-3 h-3 text-blue-600 dark:text-blue-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 8">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7 7.674 1.3a.91.91 0 0 0-1.348 0L1 7"/>
                    </svg>
                @elseif($direction === 'desc')
                    <svg class="w-3 h-3 text-blue-600 dark:text-blue-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 8">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 5.326 5.7a.909.909 0 0 0 1.348 0L13 1"/>
                    </svg>
                @else
                    <svg class="w-3 h-3 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 1v12m0-12 4 4m-4-4L1 5m4 8 4-4m-4 4-4-4"/>
                    </svg>
                @endif
            </span>
        @endif
    </div>
</th>