@props(['column', 'label', 'sort', 'direction'])

@php
    $active = $sort === $column;
    $classes = 'catalog-sort-btn';
    if ($active) {
        $classes .= ' is-sorted '.($direction === 'asc' ? 'is-sorted-asc' : 'is-sorted-desc');
    }
@endphp

<button
    type="button"
    class="{{ $classes }}"
    wire:click="sortBy('{{ $column }}')"
    aria-sort="{{ $active ? ($direction === 'asc' ? 'ascending' : 'descending') : 'none' }}"
>
    <span>{{ $label }}</span>
    <span class="catalog-sort-icons" aria-hidden="true">
        <svg class="catalog-sort-chevron catalog-sort-up" viewBox="0 0 12 8" fill="currentColor">
            <path d="M6 1.5 10.5 6.5H1.5L6 1.5Z" />
        </svg>
        <svg class="catalog-sort-chevron catalog-sort-down" viewBox="0 0 12 8" fill="currentColor">
            <path d="M6 6.5 1.5 1.5h9L6 6.5Z" />
        </svg>
    </span>
</button>