<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'SearchBar',
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: 'Search...'
    }
  },
  emits: ['update:value'],
  methods: {
    updateSearch(event: Event) {
      const target = event.target as HTMLInputElement;
      this.$emit('update:value', target.value);
    },
    clearSearch() {
      this.$emit('update:value', '');
    }
  }
});
</script>

<template>
  <div class="search-container">
    <div class="search-input-wrapper">
      <input
        type="text"
        class="search-input"
        :placeholder="placeholder"
        :value="value"
        @input="updateSearch"
      />
      <button 
        v-if="value" 
        class="clear-button" 
        @click="clearSearch"
        aria-label="Clear search"
      >
        ×
      </button>
    </div>
  </div>
</template>


<style src="@/assets/css/SearchBar.css" scoped></style>