<template>
  <div>
    <b-input-group>
      <b-input-group-prepend is-text class="border-0">
        <icon name="search" />
      </b-input-group-prepend>

      <b-form-input
        v-model="filterText"
        :placeholder="$t('Common.Product.SearchProduct')"
        :data-qa="`${dataQaPrefix}-textSearchBar-searchText-input`"
      />

      <b-input-group-prepend class="border-0">
        <b-button
          v-show="filterText"
          variant="light"
          @click="filterText = ''"
          class="bg-transparent border-left-0"
          :data-qa="`${dataQaPrefix}-textSearchBar-clear-btn`"
        >
          <icon name="clear-icon" />
        </b-button>
      </b-input-group-prepend>
    </b-input-group>
  </div>
</template>

<script>
export default {
  name: 'TextSearchBar',
  props: {
    dataQaPrefix: { type: String, required: true },
  },
  data() {
    return {
      filterText: '',
    }
  },
  watch: {
    filterText(text) {
      this.$emit('input', text)
    },
  },
}
</script>
