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

<th @class([
    'num text-right' => $align === 'right',
    'text-center' => $align === 'center',
])>
    @if ($sortable && $field)
        <button type="button" wire:click="sortBy('{{ $field }}')"
                class="inline-flex items-center gap-1 hover:text-brand">
            {{ $slot }}
            @if ($sortable === $field)
                <x-ui.icon name="chevron-down" @class(['h-3 w-3 transition', 'rotate-180' => $direction === 'asc']) />
            @else
                <x-ui.icon name="chevron-up-down" class="h-3 w-3 opacity-30" />
            @endif
        </button>
    @else
        {{ $slot }}
    @endif
</th>