@props([
    'sortable' => false,
    'sorted' => null,
    'sortKey' => null,
    'align' => 'left',
    'compact' => false,
])

@php
    $paddingClasses = $compact ? 'px-3 py-2' : 'px-5 py-3';
    $alignClasses = match($align) {
        'center' => 'text-center',
        'right' => 'text-right',
        default => 'text-left',
    };
    $thClasses = "$paddingClasses $alignClasses text-xs font-semibold text-base/70 uppercase tracking-wider";
@endphp

<th {{ $attributes->merge(['class' => $thClasses]) }}>
    @if($sortable)
        <button 
            type="button"
            @if($sortKey)
                wire:click="sortBy('{{ $sortKey }}')"
            @endif
            class="flex items-center gap-1 hover:text-base/90 transition-colors group"
        >
            <span>{{ $slot }}</span>
            <span class="flex flex-col">
                @if($sorted === 'asc')
                    <x-ri-arrow-up-s-fill class="size-3 text-primary" />
                @elseif($sorted === 'desc')
                    <x-ri-arrow-down-s-fill class="size-3 text-primary" />
                @else
                    <x-ri-arrow-up-down-line class="size-3 text-base/40 group-hover:text-base/60" />
                @endif
            </span>
        </button>
    @else
        {{ $slot }}
    @endif
</th>