<template>
  <div class="form-input">
    <label
      >{{ labelText + (required ? '*' : '') }}
      <input
        v-model="inputValue"
        :value="value ? value : inputValue"
        :required="required"
        :type="type"
        :step="step"
        :placeholder="placeholder"
        @input="handleInput"
      />
    </label>
  </div>
</template>

<script>
export default {
  props: {
    labelText: {
      type: String,
      default: '',
    },
    required: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: '',
    },
    step: {
      type: String,
      default: '',
    },
    value: {
      type: [Number, String],
      default: '',
    },
    placeholder: {
      type: String,
      default: '',
    },
  },
  emits: ['input'],
  data() {
    return {
      inputValue: this.value,
    }
  },
  methods: {
    handleInput() {
      this.$emit('input', this.inputValue)
    },
  },
}
</script>

<style lang="scss" scoped>
.form-input {
  // width: 100%; //Utilizar este width para controlar el ancho desde el elemento padre
  width: 45%;
  @include mobile {
    width: 80%;
  }
  // @include desktop {
  //   width: 25%;
  // }
}
input {
  width: 100%;
  background-color: $color-grey-inputs;
  border: 1px solid $color-grey-inputs-border;
  border-radius: 4px;
  padding: 10px 5px;
  display: block;
  margin-bottom: 10px;
  font-weight: $regular;
  outline: none;
}

label {
  text-align: left;
  color: $color-navy;
  font-weight: $bold;
  font-size: $xs;
  display: block;
}
</style>
