@props(['name' => 'quantity', 'value' => 1, 'min' => 1])

<div
    data-controller="quantity"
    data-quantity-min-value="{{ $min }}"
    class="inline-flex items-stretch gap-2"
    role="group"
    aria-label="Quantity"
>
    <input
        type="number"
        name="{{ $name }}"
        id="{{ $name }}"
        value="{{ $value }}"
        min="{{ $min }}"
        data-quantity-target="input"
        data-action="change->quantity#clamp"
        class="w-10 border border-black bg-transparent text-center font-display text-[19px] font-bold [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none focus:outline-none"
        aria-label="Quantity"
        {{ $attributes }}
    >

    <div class="flex flex-col -ml-px gap-2 justify-between">
        <button
            type="button"
            data-action="click->quantity#increment"
            class="w-10 aspect-square border border-black flex items-center justify-center leading-none font-bold text-xl hover:bg-black hover:text-neutral-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-black"
            aria-label="Increase quantity"
        >+</button>
        <button
            type="button"
            data-action="click->quantity#decrement"
            data-quantity-target="decrement"
            class="aspect-square w-10 border border-black -mt-px flex items-center justify-center leading-none font-bold text-xl hover:bg-black hover:text-neutral-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-black disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-black"
            aria-label="Decrease quantity"
        >−</button>
    </div>
</div>