<template>
  <div class="Search">
    <input
        v-model="text"
        :id="id"
        :placeholder="label"
        @blur="emit('search', text)"
    />
    <PpButton class="search-button">
      <Icon name="uil:search" mode="svg" />
    </PpButton>
  </div>
</template>

<script setup lang="ts">
type Props = {
  label : string
  id : string
}

defineProps<Props>()

const emit = defineEmits(['search'])
const text = defineModel()
</script>