@props([
    'name' => 'search', 
    'placeholder' => 'Buscador', 
    'value' => ''
])

<div {{ $attributes->merge(['class' => 'flex items-center rounded-md border border-complement100 h-12 px-4 py-2 bg-white focus-within:ring-2 focus-within:ring-primary transition-all']) }}>
    <svg class="w-5 h-5 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
    </svg>

    <input 
        type="text" 
        name="{{ $name }}"
        id="{{ $name }}"
        value="{{ old($name, $value) }}"
        placeholder="{{ $placeholder }}" 
        class="w-full bg-transparent focus:outline-none text-parrafo placeholder-gray-400"
    >
</div>