@props(['column', 'sortBy', 'sortDirection', 'align' => 'left'])

<th @class([
    'px-4 py-3 font-medium text-gray-500 dark:text-gray-400 select-none',
    'text-right' => $align === 'right',
    'text-left' => $align === 'left',
])>
    <button
        type="button"
        wire:click="sortByColumn('{{ $column }}')"
        @class([
            'inline-flex items-center gap-1 hover:text-gray-800 dark:hover:text-gray-200',
            'flex-row-reverse' => $align === 'right',
        ])
    >
        <span>{{ $slot }}</span>
        <span class="text-[10px] text-gray-400 dark:text-gray-500">
            @if ($sortBy === $column)
                {{ $sortDirection === 'asc' ? '▲' : '▼' }}
            @else
                ▲▼
            @endif
        </span>
    </button>
</th>