@props([
    'label' => 'Dealer',
])

<div {{ $attributes->merge(['class' => 'flex items-center justify-center gap-3 sm:gap-5']) }}>
    <button
        type="button"
        class="inline-flex shrink-0 items-center justify-center p-1 text-gray-900 transition enabled:hover:opacity-70 disabled:cursor-default disabled:text-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 rounded"
        @click="goPrev()"
        :disabled="!canGoPrev"
        aria-label="Previous dashboard view"
    >
        <svg class="h-3 w-3 sm:h-3.5 sm:w-3.5" viewBox="0 0 12 12" fill="currentColor" aria-hidden="true">
            <path d="M7.5 1.5 3 6l4.5 4.5V1.5Z" />
        </svg>
    </button>

    <p
        class="min-w-0 text-base sm:text-lg font-bold text-gray-900 truncate max-w-[12rem] sm:max-w-[20rem] text-center"
        x-text="currentLabel"
    >
        {{ $label }}
    </p>

    <button
        type="button"
        class="inline-flex shrink-0 items-center justify-center p-1 text-gray-900 transition enabled:hover:opacity-70 disabled:cursor-default disabled:text-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 rounded"
        @click="goNext()"
        :disabled="!canGoNext"
        aria-label="Next dashboard view"
    >
        <svg class="h-3 w-3 sm:h-3.5 sm:w-3.5" viewBox="0 0 12 12" fill="currentColor" aria-hidden="true">
            <path d="M4.5 1.5 9 6 4.5 10.5V1.5Z" />
        </svg>
    </button>
</div>