{{--
    Table Header Cell Component - LucentUI Theme
    Migrated from AdminLTE to Tailwind
--}}

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

@php
    $alignClasses = [
        'start' => 'text-left justify-start',
        'center' => 'text-center justify-center',
        'end' => 'text-right justify-end',
    ];
    $alignClass = $alignClasses[$align] ?? $alignClasses['start'];
    
    $isSorted = $sortable && $sortKey === $currentSort;
    
    $baseClasses = 'px-5 py-3.5 text-xs font-semibold uppercase tracking-wider text-secondary bg-transparent align-middle whitespace-nowrap';
    $sortableClasses = $sortable ? 'cursor-pointer select-none transition-colors duration-200 hover:text-primary dark:hover:text-primary' : '';
    $sortedClasses = $isSorted ? 'text-primary dark:text-primary' : '';
@endphp

<th 
    {{ $attributes->class([
        $baseClasses,
        $alignClass,
        $sortableClasses,
        $sortedClasses,
    ]) }}
    @if($sortable && $sortKey)
        wire:click="sort('{{ $sortKey }}')"
    @endif
>
    <div class="flex items-center gap-1.5 {{ $alignClass }}">
        <span>{{ $slot }}</span>
        @if($sortable)
            <span class="inline-flex {{ $isSorted ? 'text-primary' : 'text-secondary/50' }}">
                @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>