export default (injectName) => {
  return {
    inject: [injectName],
    props: {
      value: { type: Number, default: 1 },
      size: {
        type: String,
        default: 'small',
        validator(value) {
          const validSizes = ['medium', 'small', 'mini']
          const isValid = validSizes.includes(value) || value === ''
          if (!isValid) {
            console.warn(`Invalid prop: size should be one of 'medium', 'small', or 'mini', but received '${value}'.`)
          }
          return isValid
        }
      }
    },
    data() {
      return {
        selectValue: 1
      }
    },
    watch: {
      value: {
        handler(newValue, oldValue) {
          if (newValue !== oldValue) {
            this.selectValue = newValue
          }
        },
        immediate: true
      },

      selectValue: {
        handler(newValue, oldValue) {
          if (newValue !== oldValue) {
            this.$emit('input', newValue)
          }
        }
      }
    }
  }
}