@props([
    'direction' => null,
    'sortable' => false,
    'sorted' => false,
    'align' => 'start',
])

@php
$classes = Flux::classes()
    ->add('py-3 px-3 first:ps-0 last:pe-0')
    ->add('text-start text-sm font-medium text-zinc-800 dark:text-white')
    ->add(match($align) {
        'center' => 'group/center-align',
        'end' => 'group/end-align',
        // Right is @deprecated but needed for backwards compatibility...
        'right' => 'group/end-align',
        default => '',
    })
    // If the last column is sortable, remove the right negative margin that the sortable applies to itself, as the
    // negative margin caused the last column to overflow the table creating an unnecessary horizontal scrollbar...
    ->add('**:data-flux-table-sortable:last:me-0')
    ;
@endphp

<th {{ $attributes->class($classes) }} data-flux-column>
            <div class="flex in-[.group\/center-align]:justify-center in-[.group\/end-align]:justify-end">{{ $slot }}</div>
    </th>