@props([
    'type' => 'text',
    'name',
    'label' => null,
    'helper' => null,
    'error' => null,
    'placeholder' => null,
    'value' => null,
    'required' => false,
    'disabled' => false,
    'color' => 'emerald', // Focus glow color
])

@php
    $focusColors = [
        'emerald' => 'focus:border-emerald-500/50 focus:shadow-[0_0_0_3px_rgba(16,185,129,0.1),0_0_20px_rgba(16,185,129,0.2)]',
        'amber' => 'focus:border-amber-500/50 focus:shadow-[0_0_0_3px_rgba(245,158,11,0.1),0_0_20px_rgba(245,158,11,0.2)]',
        'cyan' => 'focus:border-cyan-500/50 focus:shadow-[0_0_0_3px_rgba(6,182,212,0.1),0_0_20px_rgba(6,182,212,0.2)]',
        'pink' => 'focus:border-pink-500/50 focus:shadow-[0_0_0_3px_rgba(236,72,153,0.1),0_0_20px_rgba(236,72,153,0.2)]',
    ];
    $focusClass = $focusColors[$color] ?? $focusColors['emerald'];
@endphp

<div class="space-y-2">
    @if($label)
    <label for="{{ $name }}" class="block text-sm font-medium text-db-text-secondary">
        {{ $label }}
        @if($required)
        <span class="text-red-400">*</span>
        @endif
    </label>
    @endif

    <input
        type="{{ $type }}"
        name="{{ $name }}"
        id="{{ $name }}"
        value="{{ old($name, $value) }}"
        placeholder="{{ $placeholder }}"
        {{ $required ? 'required' : '' }}
        {{ $disabled ? 'disabled' : '' }}
        {{ $attributes->merge([
            'class' => 'w-full px-4 py-2.5 glass-input rounded-xl text-db-text-primary text-sm placeholder-db-text-muted focus:outline-none transition-all duration-200 ' .
                       ($error ? 'border-red-500/50 focus:border-red-500 focus:shadow-[0_0_0_3px_rgba(239,68,68,0.1),0_0_20px_rgba(239,68,68,0.2)]' : $focusClass) .
                       ($disabled ? ' opacity-50 cursor-not-allowed' : '')
        ]) }}
    >

    @if($helper && !$error)
    <p class="text-xs text-db-text-muted">{{ $helper }}</p>
    @endif

    @if($error)
    <p class="text-xs text-red-400">{{ $error }}</p>
    @endif
</div>