@props(['field' => null, 'sortField' => null, 'sortDirection' => 'asc', 'align' => 'left'])

@php $sortable = $field !== null; @endphp

<th {{ $attributes->merge(['style' => "text-align:{$align}"]) }}>
    @if ($sortable)
        <button type="button" wire:click="sortBy('{{ $field }}')"
                class="rf-th-sort inline-flex items-center gap-1"
                style="color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:none;padding:0;">
            {{ $slot }}
            @if ($sortField === $field)
                <i data-lucide="{{ $sortDirection === 'asc' ? 'chevron-up' : 'chevron-down' }}"
                   style="width:13px;height:13px;color:var(--color-primary-500);"></i>
            @else
                <i data-lucide="chevrons-up-down" style="width:13px;height:13px;opacity:.4;"></i>
            @endif
        </button>
    @else
        {{ $slot }}
    @endif
</th>