{{-- A column header that sorts the table, bound to a Livewire property shaped
     `['column' => …, 'direction' => 'asc'|'desc']` — `sortBy` by default, or the one `model` names.

     Pressing it sorts by this column, ascending first and then flipping; the arrow says which way,
     and `aria-sort` says it to a screen reader. A column that cannot be sorted is a plain `<th>`.
     `class` lands on the `<th>` (end-aligning a number column moves the button with it).

     The button is only as tall as its title-small line, so it carries `md-touch-target` and catches
     presses over M3's 48px minimum; the cell's own padding belongs to the cell, not to it. The cell
     renders `data-md-sort-header` (`data-md-active` on the sorted column) and the button
     `data-md-sort-header-button`, drawn by resources/css/components/sort-header.css. --}}

@props([
    'sortBy' => [],
    'column',
    'model' => 'sortBy',
])

@php
    $active = ($sortBy['column'] ?? null) === $column;
    $direction = $active ? (($sortBy['direction'] ?? 'asc') === 'desc' ? 'desc' : 'asc') : null;
    $next = $active && $direction === 'asc' ? 'desc' : 'asc';
@endphp

<th data-md-sort-header @if ($active) data-md-active aria-sort="{{ $direction === 'asc' ? 'ascending' : 'descending' }}" @endif {{ $attributes }}>
    <button
        type="button"
        wire:click="$set('{{ $model }}', {{ json_encode(['column' => $column, 'direction' => $next]) }})"
        data-md-sort-header-button
        class="md-focus-ring md-touch-target"
    >
        {{ $slot }}
        <x-livewire-material::icon :name="$direction === 'desc' ? 'arrow_downward' : 'arrow_upward'" size="16" data-md-sort-header-arrow />
    </button>
</th>