@props(['field', 'sortField', 'sortDirection', 'label'])
{{-- Sortable table header. The component whitelists $field server-side. --}}
@php
    $active = $sortField === $field;
    $ariaSort = $active ? ($sortDirection === 'asc' ? 'ascending' : 'descending') : 'none';
@endphp
<th scope="col" aria-sort="{{ $ariaSort }}" {{ $attributes }}>
    <button type="button" wire:click="sortBy('{{ $field }}')" class="group inline-flex items-center gap-1 uppercase tracking-wide hover:text-slate-800">
        {{ $label }}
        <span @class(['text-slate-700' => $active, 'text-slate-300 group-hover:text-slate-400' => ! $active])>
            @if ($active && $sortDirection === 'asc')
                <x-icon name="chevron-up" class="size-3.5" />
            @elseif ($active)
                <x-icon name="chevron-down" class="size-3.5" />
            @else
                <x-icon name="chevron-up-down" class="size-3.5" />
            @endif
        </span>
        <span class="sr-only">Sort by {{ $label }}</span>
    </button>
</th>