@props([
    'sortable' => false,
    'direction' => '',
    'active' => false
])
<span {{ $attributes->merge(['class' => 'hp-badge-size fw-normal text-black hp-text-color-dark-50 position-relative']) }}
      @if($sortable)
      style="cursor: pointer"
      @endif
>
	{{ $slot }}
	
	@if($sortable && $active)
		@if ($direction === 'asc')
		<i class="hp-text-color-dark-0 ri-2x ri-arrow-drop-down-line" style="position: absolute; right: -30px; top: -4px;"></i>
		@endif
		
		@if ($direction === 'desc')
			<i class="hp-text-color-dark-0 ri-2x ri-arrow-drop-up-line" style="position: absolute; right: -30px; top: -4px;"></i>
		@endif
	@endif
	
	@if($sortable && !$active)
		<i class="hp-text-color-dark-0 ri-2x ri-arrow-drop-down-line" style="position: absolute; right: -30px; top: -1px;"></i>
		<i class="hp-text-color-dark-0 ri-2x ri-arrow-drop-up-line" style="position: absolute; right: -30px; top: -8px;"></i>
	@endif
</span>