@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 hover:text-gray-900 transition-colors">
        {{ $slot }}
        @if($sortBy === $column)
            <svg class="w-3.5 h-3.5 {{ $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-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M7 7l3-3 3 3m0 6l-3 3-3-3"/></svg>
        @endif
    </button>
</th>
