{{--
    Sort Icon Component (for Alpine.js-driven tables)
    Reads $sortBy and $sortDir from the parent Alpine.js component.

    Props:
      $column – the column key this icon is for

    Usage (inside an Alpine.js x-data context):
      <th @click="setSort('name')">
          Name
          <x-tables.sort-icon column="name" />
      </th>
--}}
@props(['column' => ''])

<span class="inline-flex flex-col gap-0.5 ml-0.5 opacity-60">
    <svg
        class="w-2.5 h-2.5 transition-colors"
        :class="{
            'text-white': sort.column === '{{ $column }}' && sort.dir === 'asc',
            'text-white/40': sort.column !== '{{ $column }}' || sort.dir !== 'asc',
        }"
        viewBox="0 0 10 6" fill="currentColor"
    >
        <path d="M0 6l5-6 5 6z"/>
    </svg>
    <svg
        class="w-2.5 h-2.5 transition-colors"
        :class="{
            'text-white': sort.column === '{{ $column }}' && sort.dir === 'desc',
            'text-white/40': sort.column !== '{{ $column }}' || sort.dir !== 'desc',
        }"
        viewBox="0 0 10 6" fill="currentColor"
    >
        <path d="M0 0l5 6 5-6z"/>
    </svg>
</span>