@props(['label' => null, 'name' => null, 'type' => 'text', 'error' => null])

<div class="space-y-1">
    @if($label)
        <label for="{{ $attributes->get('id') ?? $name }}" class="block text-[10px] font-bold text-zinc-500 uppercase tracking-tighter">
            {{ $label }}
        </label>
    @endif
    
    <input 
        type="{{ $type }}" 
        name="{{ $name }}" 
        id="{{ $attributes->get('id') ?? $name }}"
        {{ $attributes->merge(['class' => 'w-full px-3 py-2 bg-zinc-50 border border-zinc-200 rounded-sm text-xs focus:outline-hidden focus:border-amber-500/50 focus:ring-1 focus:ring-amber-500/20 transition-all text-zinc-900 placeholder:text-zinc-400']) }}
    >

    @if($error)
        <p class="text-[9px] text-red-500 mt-1 uppercase font-medium">{{ $error }}</p>
    @elseif($name)
        @error($name)
            <p class="text-[9px] text-red-500 mt-1 uppercase font-medium">{{ $message }}</p>
        @enderror
    @endif
</div>