@props([
    'label' => null,
    'id' => null,
    'name' => null,
    'type' => 'text',
    'placeholder' => null,
    'hint' => null,
    'error' => null,
    'required' => false,
    'disabled' => false,
    'readonly' => false,
    'prefix' => null,
    'suffix' => null,
    'icon' => null,
    'iconPosition' => 'left',
    'size' => 'md',
])

@php
    $inputId = $id ?? $name ?? Str::random(8);
    
    // Size classes
    $sizeClasses = match($size) {
        'sm' => 'px-3 py-1.5 text-sm',
        'md' => 'px-4 py-2 text-sm',
        'lg' => 'px-4 py-2.5 text-base',
        default => 'px-4 py-2 text-sm',
    };
    
    $iconSizeClasses = match($size) {
        'sm' => 'size-4',
        'md' => 'size-4',
        'lg' => 'size-5',
        default => 'size-4',
    };
    
    // Input base classes
    $baseClasses = 'w-full bg-background border rounded-lg transition-all duration-200 outline-none';
    $focusClasses = 'focus:ring-2 focus:ring-primary/20 focus:border-primary';
    $disabledClasses = $disabled ? 'opacity-50 cursor-not-allowed bg-neutral/5' : '';
    $errorClasses = $error ? 'border-danger focus:ring-danger/20 focus:border-danger' : 'border-neutral/30';
    
    // Padding adjustments for icons/affixes
    $paddingLeft = ($icon && $iconPosition === 'left') || $prefix ? 'pl-10' : '';
    $paddingRight = ($icon && $iconPosition === 'right') || $suffix ? 'pr-10' : '';
    
    $inputClasses = "$baseClasses $sizeClasses $focusClasses $disabledClasses $errorClasses $paddingLeft $paddingRight";
@endphp

<div {{ $attributes->only('class')->merge(['class' => 'flex flex-col gap-1.5']) }}>
    {{-- Label --}}
    @if($label)
        <label for="{{ $inputId }}" class="text-sm font-medium text-base/80">
            {{ $label }}
            @if($required)
                <span class="text-danger">*</span>
            @endif
        </label>
    @endif
    
    {{-- Input wrapper --}}
    <div class="relative">
        {{-- Left icon --}}
        @if($icon && $iconPosition === 'left')
            <div class="absolute left-3 top-1/2 -translate-y-1/2 text-base/50 pointer-events-none">
                <x-dynamic-component :component="$icon" class="{{ $iconSizeClasses }}" />
            </div>
        @endif
        
        {{-- Prefix --}}
        @if($prefix)
            <div class="absolute left-3 top-1/2 -translate-y-1/2 text-base/50 text-sm pointer-events-none">
                {{ $prefix }}
            </div>
        @endif
        
        {{-- Input --}}
        <input 
            type="{{ $type }}"
            id="{{ $inputId }}"
            @if($name) name="{{ $name }}" @endif
            @if($placeholder) placeholder="{{ $placeholder }}" @endif
            @if($required) required @endif
            @if($disabled) disabled @endif
            @if($readonly) readonly @endif
            {{ $attributes->except('class')->merge(['class' => $inputClasses]) }}
        >
        
        {{-- Right icon --}}
        @if($icon && $iconPosition === 'right')
            <div class="absolute right-3 top-1/2 -translate-y-1/2 text-base/50 pointer-events-none">
                <x-dynamic-component :component="$icon" class="{{ $iconSizeClasses }}" />
            </div>
        @endif
        
        {{-- Suffix --}}
        @if($suffix)
            <div class="absolute right-3 top-1/2 -translate-y-1/2 text-base/50 text-sm pointer-events-none">
                {{ $suffix }}
            </div>
        @endif
    </div>
    
    {{-- Hint text --}}
    @if($hint && !$error)
        <p class="text-xs text-base/60">{{ $hint }}</p>
    @endif
    
    {{-- Error message --}}
    @if($error)
        <p class="text-xs text-danger flex items-center gap-1">
            <x-ri-error-warning-line class="size-3.5" />
            {{ $error }}
        </p>
    @endif
</div>