<template>
  <div :class="'input ' + (wide ? 'wide' : '')">
    <div v-if="prefix" class="prefixed-input">
      <div class="prefix">
        <p>{{prefix}}</p>
      </div>
      <input type="text" class="text-input" :placeholder="placeholder" v-model="input">
    </div>
    <div v-else>
      <input type="text" class="text-input" :placeholder="placeholder" v-model="input">
    </div>
  </div>
</template>

<script>

export default {
  props: {
    placeholder: {
      type: String,
      default: ''
    },
    prefix: {
      type: String,
      default: ''
    },
    wide: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      input: ''
    }
  },
  watch: {
    input () {
      this.$emit('input', this.input)
    }
  }
}
</script>

<style src="./text-input.scss" lang="scss"></style>
<style src="../assets/fonts/gilmer/gilmer.css"></style>
