<template>
  <view class="stepper-wrapper">
    <image
      class="stepper-btn stepper-btn-minus"
      src="./images/icon_minus.png"
      mode="aspectFill"
      @click="decrease"
    ></image>
    <text class="stepper-text">{{ value }}</text>
    <image
      class="stepper-btn stepper-btn-plus"
      src="./images/icon_plus.png"
      mode="aspectFill"
      @click="increase"
    ></image>
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits } from "vue";

// Props
const props = defineProps({
  modelValue: {
    type: Number,
    default: 1,
  },
  min: {
    type: Number,
    default: 1,
  },
  max: {
    type: Number,
    default: 100,
  },
});

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

// Local state
const value = ref(props.modelValue);

// Methods
const decrease = () => {
  if (value.value === 1) return;

  if (value.value > props.min) {
    value.value--;
    emit("update:modelValue", value.value);
  }
};

const increase = () => {
  if (value.value < props.max) {
    value.value++;
    emit("update:modelValue", value.value);
  }
};
</script>

<style scoped lang="scss">
@import "./styles/index.scss";
</style>
