<script setup>

    const props = defineProps({
        saerch: {
            type: [String]
        },
        placeholder: {
            type: String,
        }
    })

    defineEmits(['update:saerch'])

</script>

<template>
    <div class="mb-4"> 
        <input 
            class="custom-search"
            type="search" 
            name="search" 
            :placeholder="placeholder"
            :value="saerch"
            @input="$event => $emit('update:saerch', $event.target.value)"
        />
    </div>
</template>

<style scoped>

    .custom-search {
        width: 100%;
        padding: 12px 16px;
        border: 1px solid rgb(222, 214, 214);
        border-radius: 5px;
    }

    .custom-search:focus {
        outline: none;
        border-color: rgb(217, 202, 202);
    }

</style>