@props([
    'field' => null,
])
<th {{ $attributes->merge(['class' => 'p-3 text-left text-sm font-semibold text-gray-900']) }}>
    @if($field)
        <button wire:click="sortBy('{{ $field }}')" type="button" class="inline-flex items-center gap-1 group">
            {{ $slot }}
            <span class="text-gray-400 group-hover:text-gray-600">
                @if($this->sortField === $field)
                    @if($this->sortDirection === 'asc')
                        <svg class="w-3 h-3 text-gray-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
                        </svg>
                    @else
                        <svg class="w-3 h-3 text-gray-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                        </svg>
                    @endif
                @else
                    <svg class="w-3 h-3 opacity-0 group-hover:opacity-50" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
                    </svg>
                @endif
            </span>
        </button>
    @else
        {{ $slot }}
    @endif
</th>
