<template>
  <div class="base-search">
    <label class="search-bar box-shadow-small header__search-field" :class="width ? 'full-width' : '' ">
      <input
        id="header__search-field-id"
        :type="type ? 'number': 'text'"
        name="search"
        class="header__search-field"
        :placeholder="placeHolder ? placeHolder : 'Pesquise aqui seu pedido...'"
        v-model="inputValue"
        autocomplete="off"
        maxlength="70"
        @keydown.enter.prevent="searchInput"
      >
      <button type="button" @click="clearInput" class="btn-clear" :class="padding ? 'padding-clear': ''" title="Limpar pesquisa">
        <i v-show="inputValue" class="fa-regular fa-circle-xmark"></i>
      </button>  
      <button v-if="loader" type="button" class="btn-search">
        <i class="fa-solid fa-circle-notch fa-spin fa-2xl"></i>
      </button>
      <button v-else type="button" @click="searchInput" class="btn-search">
        <i class="fas fa-search" aria-hidden="true"></i>
      </button>
    </label>

    <slot> </slot>
  </div>
</template>

<style src="./styles.css" scoped></style>
<script src="./scripts.js"></script>
