@props([
    'sortable' => null,
    'direction' => null,
])

<th 
    {{$attributes->merge(['class' => 'px-6 py-3 '])->only('class')}}
>
    @unless ($sortable)
        <span class="text-left text-xs-loading-4 font-medium text-slate-900 uppercase tracking-wider">
            {{$slot}}
        </span>
    @else
        <button {{$attributes->except('class')}} class="flex items-center space-x-1 text-left text-xs-loading-4 font-medium">
            <span>{{$slot}}</span>
            <span>
                @if ($direction === 'asc')
                    <x-lucide-arrow-up class="ml-4 w-4 h-4 " />
                @elseif($direction ==='desc')
                    <x-lucide-arrow-down class="ml-4 w-4 h-4 " />

                @else
                    <x-lucide-arrow-up class="ml-4 w-4 h-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 " />

                @endif
            </span>
        </button>
    @endif
</th>