@props([
    'id',
    'name',
    'value' => '',
    'min' => 0,
    'max' => null,
    'inputClass' => '',
    'required' => true,
])

<div class="oah-qty-stepper flex min-h-[3.25rem] w-full overflow-hidden rounded-xl border-[1.5px] border-neutral-200 bg-white transition hover:border-neutral-300 focus-within:border-oah-yellow focus-within:shadow-[0_0_0_3px_rgba(226,181,36,0.35)]">
    <button type="button"
        class="oah-qty-stepper-btn flex w-12 shrink-0 items-center justify-center border-r border-neutral-200 bg-neutral-50 text-2xl font-bold leading-none text-oah-black transition hover:bg-neutral-100 active:bg-neutral-200"
        data-step="-1"
        aria-label="Decrease">
        −
    </button>
    <input
        type="number"
        id="{{ $id }}"
        name="{{ $name }}"
        value="{{ $value }}"
        min="{{ $min }}"
        @if ($max !== null && $max !== '') max="{{ $max }}" @endif
        step="1"
        inputmode="numeric"
        @if ($required) required @endif
        class="oah-qty-stepper-input min-w-0 flex-1 border-0 bg-transparent px-2 py-3 text-center text-xl font-extrabold leading-none focus:outline-none focus:ring-0 sm:text-2xl {{ $inputClass }}"
    >
    <button type="button"
        class="oah-qty-stepper-btn flex w-12 shrink-0 items-center justify-center border-l border-neutral-200 bg-neutral-50 text-2xl font-bold leading-none text-oah-black transition hover:bg-neutral-100 active:bg-neutral-200"
        data-step="1"
        aria-label="Increase">
        +
    </button>
</div>