<template>
  <div class="border border-C bg-A rounded-md w-full relative items-center">
    <input v-model="searchText" type="text" :placeholder="props.placeholder"
      class="focus:outline-none focus:ring-2 focus:ring-blue-400 rounded-md w-full px-3 py-2 "
      @input="$emit('update:search', searchText)" />
    <div class="absolute right-3 top-1/2 -translate-y-1/2 text-C">
     <i class="fas fa-search"></i>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";

const props = defineProps({
  placeholder: {
    type: String,
    default: "Cari ..."
  },
});
const searchText = ref("");
defineEmits(["update:search"]);
</script>
