<template>
  <div class="relative h-full">
    <t-input
      ref="inputIcon"
      :type="type"
      class="pl-12"
      :class="inputClass"
      v-bind="$attrs"
      v-on="$listeners"
    />
    <div
      class="absolute flex items-center bottom-0 top-0 ml-4"
      :class="iconWrapperClass"
    >
      <fa slot="icon" :icon="icon" :class="iconClass" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TInputIcon',
  props: {
    type: {
      type: String,
      default: 'text',
    },
    icon: {
      type: String,
      default: null,
    },
    iconWrapperClass: {
      type: String,
      default: null,
    },
    iconClass: {
      type: String,
      default: null,
    },
    inputClass: {
      type: String,
      default: null,
    },
    hasFocus: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    if (this.focus) this.focus()
  },
  methods: {
    focus() {
      this.$refs.inputIcon.$el.focus()
    },
  },
}
</script>