<template>
    <div class="cart-quantity">
        <div>
            <Button icon="isax isax-add" text severity="secondary" @click="count++" :disabled="count >= range.max" />
            <b>{{ count }}</b>
            <Button icon="isax isax-minus" text severity="secondary" @click="count--" :disabled="count <= range.min" />
        </div>
        <Button icon="isax isax-trash" text severity="danger" @click="count = 0" />
    </div>
</template>

<script setup>
defineProps({
    range: { type: Object, default: { min: 1, max: 1000 } }
})
const count = defineModel({ default: 1 })
</script>

<style lang="scss">
.cart-quantity {
    @apply flex items-center gap-3 lg:gap-4;

    div {
        @apply flex border border-[#E5E5E5] rounded-lg;

        b {
            @apply flex items-center justify-center text-primary-600;
            @apply w-10 h-10 text-base lg:w-12 lg:h-12 lg:text-xl lg:pb-1;
        }

        button {
            @apply rounded-lg text-primary-600 w-10 h-10 text-base lg:w-12 lg:h-12 lg:text-[1.8em] #{!important};
        }
    }

    &>button {
        @apply rounded-lg border border-[#E5E5E5] w-10 h-10 text-base lg:w-12 lg:h-12 lg:text-xl #{!important};
    }
}
</style>
