{{--
    Table Header Cell Component - TailServer Theme
--}}

@props([
    'align' => 'start',
    'sortable' => false,
    'sortKey' => null,
    'currentSort' => null,
    'currentDirection' => 'asc',
])

@php
    $alignClasses = [
        'start' => 'text-start',
        'center' => 'text-center',
        'end' => 'text-end',
    ];
    $alignClass = $alignClasses[$align] ?? $alignClasses['start'];
    
    $isSorted = $sortable && $sortKey === $currentSort;
@endphp

<th 
    {{ $attributes->class([
        'px-3 py-3 text-xs font-semibold tracking-wider text-base/60 uppercase',
        $alignClass,
        'cursor-pointer hover:text-base hover:bg-neutral/5 select-none transition-colors duration-150' => $sortable,
    ]) }}
    @if($sortable && $sortKey)
        wire:click="sort('{{ $sortKey }}')"
    @endif
>
    <div class="flex items-center gap-1.5 @if($align === 'end') justify-end @elseif($align === 'center') justify-center @endif">
        <span>{{ $slot }}</span>
        @if($sortable)
            <span class="text-base/40">
                @if($isSorted)
                    @if($currentDirection === 'asc')
                        <x-ri-arrow-up-s-line class="size-4" />
                    @else
                        <x-ri-arrow-down-s-line class="size-4" />
                    @endif
                @else
                    <x-ri-arrow-up-down-line class="size-3.5 opacity-50" />
                @endif
            </span>
        @endif
    </div>
</th>