@props(['field', 'sortField', 'sortDirection'])

@php
    $sortIcon = match (true) {
        $sortField === $field && $sortDirection === 'asc' => 'chevron-up',
        $sortField === $field && $sortDirection === 'desc' => 'chevron-down',
        default => 'chevron-up-down'
    };
    
    $sortClass = $sortField === $field 
        ? 'text-neutral-900 dark:text-white' 
        : 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300';
@endphp

<th {{ $attributes->merge(['class' => 'px-2 py-1.5 text-left text-xs font-medium cursor-pointer select-none transition-colors ' . $sortClass]) }}
    wire:click="sortBy('{{ $field }}')"
>
    <div class="flex items-center gap-0.5">
        <span>{{ $slot }}</span>
        <svg class="h-3.5 w-3.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            @if($sortIcon === 'chevron-up')
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
            @elseif($sortIcon === 'chevron-down')
                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
            @else
                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
            @endif
        </svg>
    </div>
</th>