<script>
import { mapMutations, mapState } from "vuex";

export default {
    name: "CantidadOllas",
    methods: {
        ...mapMutations("ollas", ["incrementar", "decrementar"]),
    },
    computed: {
        ...mapState("ollas", ["cantidad_de_ollas"])
    }
}
</script>

<template>
    <div class="notification has-text-centered">
        <label class="label">Cantidad de ollas:</label>
        <div class="field has-addons is-justify-content-center contador">
            <div class="control">
                <button class="button is-small"
                        :disabled="cantidad_de_ollas < 1"
                        @click.capture="decrementar">
                    <i class="fa fa-solid fa-minus"></i>
                </button>
            </div>
            <div class="control">
                <input id="cantidad"
                       v-model="cantidad_de_ollas"
                       class="input is-small"
                       type="number"
                       style="text-align: center">
            </div>
            <div class="control">
                <button class="button is-small" @click="incrementar">
                    <i class="fa fa-solid fa-plus"></i>
                </button>
            </div>
        </div>
    </div>
</template>

<style scoped>
</style>
