@props(['column', 'sortBy', 'sortDir', 'align' => 'start'])

<th {{ $attributes->merge(['class' => "px-4 py-3 text-{$align} font-medium text-gray-600"]) }}>
    <button type="button" wire:click="sortColumn('{{ $column }}')"
            class="inline-flex items-center gap-1.5 cursor-pointer hover:text-blue-600 transition-colors group">
        {{ $slot }}
        @if($sortBy === $column)
            <svg class="w-4 h-4 text-blue-600 {{ $sortDir === 'asc' ? '' : 'rotate-180' }}" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L10 4.414 6.707 7.707a1 1 0 01-1.414 0z" clip-rule="evenodd"/></svg>
        @else
            <svg class="w-4 h-4 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg>
        @endif
    </button>
</th>
