{{--
    Table Header Cell Component - TailAdmin style
--}}

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

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

<th 
    {{ $attributes->class([
        'px-5 py-3.5 text-theme-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400',
        $alignClass,
        'cursor-pointer select-none transition-colors duration-150 hover:text-gray-700 dark:hover:text-gray-300' => $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-gray-400 dark:text-gray-500">
                @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>