<script lang="ts" setup>

// types

type Props = {
    modelValue: number;
    max: number;
}

// props

const props = defineProps<Props>();
const { modelValue } = toRefs(props);

// emit

const emit = defineEmits(["update:modelValue"]);

// state

const currentQuantity = ref(modelValue.value);

// methods

const onInput = (e: any) => {
    currentQuantity.value = Number(e.target.value);
};

// watch

watch(() => currentQuantity.value, (newValue) => {
    emit("update:modelValue", newValue);
});


</script>

<template>
    <div class="">
        <NumberFieldRoot
            class="rounded-full border-slate-200 border-[1.5px] flex items-center bg-white gap-4 p-4"
            v-model="currentQuantity"
            :min="1"
            :max="max"
        >
            <NumberFieldIncrement class="cursor-pointer">
                <Icon name="ci:plus" class="**:stroke-slate-500 size-5" />
            </NumberFieldIncrement>
            <NumberFieldInput
                @input="onInput"
                class="field-sizing-content bg-transparent outline-none typo-label-md text-black"
            />
            <NumberFieldDecrement class="cursor-pointer">
                <Icon name="ci:minus" class="**:stroke-slate-500 size-5" />
            </NumberFieldDecrement>
        </NumberFieldRoot>
    </div>
</template>