<template>
  <div class="search-bar-container">
    <div class="search-wrapper">
      <PhMagnifyingGlass :size="32" weight="bold" class="search-icon"/>
      <input
          @input="inputChanged"
          v-model="value"
          type="text"
          class="search-input"
          :placeholder="placeholder"
          autocomplete="off"
      >
    </div>
  </div>
</template>

<script>
import {useDebounceFn} from "@vueuse/core";

export default {
  name: "SearchBar",
  emits: ['update:modelValue', 'inputChanged'],
  props: {
    modelValue: {
      type: String,
      required: false,
      default: ''
    },
    placeholder: {
      type: String,
      required: false,
      default: 'Search term'
    }
  },
  data() {
    return {
      debouncedSearch: null,
    }
  },
  created() {
    this.debouncedSearch = useDebounceFn((query) => {
      this.handleSearch(query);
    }, 300);
  },
  methods: {
    handleSearch(query) {
      this.$emit('inputChanged', query);
    }
  },
  computed: {
    value: {
      get() {
        return this.modelValue;
      },
      set(value) {
        this.debouncedSearch(value);
        this.$emit('update:modelValue', value);
      }
    }
  }
}
</script>


<style scoped>
.search-bar-container {
  background: white;
  display: flex;
  align-items: center;
  gap: 2.4rem;
}


.search-wrapper {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 0.4rem;
  padding: 0.6rem 1.2rem;
  /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);*/
  border: 0.2rem solid #E3EDFF;
  transition: all 0.1s ease;
  flex: 1 1 auto;
}

.search-wrapper:hover {
  background: #EEF4FF;
  border: 0.2rem solid #8DB3FE;
  /*transform: translateY(2px);*/
  transform: scale(1.01);
}


.search-icon {
  width: 1.8rem;
  height: 1.8rem;
  margin-right: 1.2rem;
  color: #6B869C;
  flex-shrink: 0;
}

.search-input {
  flex: 1 1 auto;
  border: none;
  outline: none;
  font-size: 1.4rem;
  color: #002F54;
  background: transparent;
  font-weight: 400;
}

.search-input::placeholder {
  color: #6B869C;
  font-weight: 400;
}
</style>