<template>
    <div class="product-card-quantity">
        <p v-if="count < 0">{{ $t('unavailable') }}</p>
        <template v-else-if="count == 0">
            <Button :label="$t('buy')" icon="isax isax-bag-2" iconPos="right" text @click.prevent="count++" />
        </template>

        <template v-else>
            <Button text icon="isax isax-add" @click.prevent="count++" :disabled="count >= range.max" />
            <p>{{ count }}</p>
            <Button text icon="isax isax-minus" @click.prevent="count--" :disabled="count <= range.min" />
        </template>
    </div>
</template>

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

<style lang="scss">
.product-card-quantity {
    @apply flex items-center justify-between w-[4.8rem] h-[1.9rem] lg:w-[5.8rem] lg:h-10 rounded-[1.8rem] border border-primary-600 overflow-hidden;

    p {
        @apply flex w-max items-center text-primary-600 text-[0.7em] lg:text-[1.1em] font-medium font-vazir mx-auto;
    }

    &:not(:has(button)) {
        @apply border-[#7F7F7F];

        p {
            @apply text-[#7F7F7F];
        }
    }

    button {
        @apply rounded-full font-normal font-iran-sans text-[0.7em] lg:text-[1.1em] #{!important};

        .isax {
            @apply text-xl;
        }
    }

    button:not(:has(.isax-bag-2)) {
        @apply w-7 h-7 first:mr-1 last:ml-1 #{!important};
    }

    button:has(.isax-bag-2) {
        @apply w-full h-full #{!important};
    }

    button[disabled]{
        @apply opacity-20;
    }
}
</style>
