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

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

@php
    $alignStyles = [
        'start' => 'text-align: left; justify-content: flex-start;',
        'center' => 'text-align: center; justify-content: center;',
        'end' => 'text-align: right; justify-content: flex-end;',
    ];
    $alignStyle = $alignStyles[$align] ?? $alignStyles['start'];
    
    $isSorted = $sortable && $sortKey === $currentSort;
@endphp

<style>
    .table-th-lte {
        padding: 0.875rem 1.25rem;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--lte-secondary, #6c757d);
        background-color: transparent;
        vertical-align: middle;
        white-space: nowrap;
    }
    .table-th-lte-sortable {
        cursor: pointer;
        user-select: none;
        transition: color var(--lte-transition-speed, 0.3s) ease;
    }
    .table-th-lte-sortable:hover {
        color: var(--lte-primary, #0d6efd);
    }
    .table-th-lte-sorted {
        color: var(--lte-primary, #0d6efd);
    }
    .table-th-lte-inner {
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }
    .table-th-lte-sort-icon {
        display: inline-flex;
        color: #adb5bd;
    }
    .table-th-lte-sorted .table-th-lte-sort-icon {
        color: var(--lte-primary, #0d6efd);
    }
    .dark .table-th-lte {
        color: #9ca3af;
    }
    .dark .table-th-lte-sortable:hover {
        color: var(--lte-primary, #0d6efd);
    }
    .dark .table-th-lte-sort-icon {
        color: #6b7280;
    }
</style>

<th 
    style="{{ $alignStyle }}"
    {{ $attributes->class([
        'table-th-lte',
        'table-th-lte-sortable' => $sortable,
        'table-th-lte-sorted' => $isSorted,
    ]) }}
    @if($sortable && $sortKey)
        wire:click="sort('{{ $sortKey }}')"
    @endif
>
    <div class="table-th-lte-inner" style="{{ $alignStyle }}">
        <span>{{ $slot }}</span>
        @if($sortable)
            <span class="table-th-lte-sort-icon">
                @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>