{{--
    Input Component - TailAdmin Theme
    
    Usage:
    <x-proxmox::ui.input name="email" label="Email" />
    <x-proxmox::ui.input name="search" placeholder="Search..." icon="ri-search-line" />
    <x-proxmox::ui.input name="password" type="password" label="Password" error="Password is required" />
--}}

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

@php
    $sizeClasses = [
        'sm' => 'h-9 text-sm',
        'md' => 'h-11 text-sm',
        'lg' => 'h-12 text-base',
    ];
    $sizeClass = $sizeClasses[$size] ?? $sizeClasses['md'];
    
    $inputClasses = 'flex w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs transition-colors duration-200 placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800';
    
    if ($error) {
        $inputClasses = str_replace('border-gray-300', 'border-error-300', $inputClasses);
        $inputClasses = str_replace('focus:border-brand-300', 'focus:border-error-500', $inputClasses);
        $inputClasses = str_replace('focus:ring-brand-500/10', 'focus:ring-error-500/10', $inputClasses);
    }
    
    if ($icon) {
        $inputClasses .= ' pl-11';
    }
    
    if ($iconRight) {
        $inputClasses .= ' pr-11';
    }
@endphp

<div {{ $attributes->only('class')->class(['space-y-1.5']) }}>
    @if($label)
        <label @if($name) for="{{ $name }}" @endif class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
            {{ $label }}
            @if($required)
                <span class="text-error-500">*</span>
            @endif
        </label>
    @endif
    
    <div class="relative">
        @if($icon)
            <div class="pointer-events-none absolute inset-y-0 left-0 flex h-11 w-[46px] items-center justify-center border-r border-gray-200 dark:border-gray-800">
                <x-dynamic-component :component="$icon" class="fill-gray-500 dark:fill-gray-400 size-5" />
            </div>
        @endif
        
        <input
            type="{{ $type }}"
            @if($name) name="{{ $name }}" id="{{ $name }}" @endif
            @if($placeholder) placeholder="{{ $placeholder }}" @endif
            @if($disabled) disabled @endif
            @if($readonly) readonly @endif
            @if($required) required @endif
            {{ $attributes->except('class')->class([$inputClasses, $sizeClass]) }}
        />
        
        @if($iconRight)
            <div class="pointer-events-none absolute inset-y-0 right-0 flex h-11 w-[46px] items-center justify-center border-l border-gray-200 dark:border-gray-800">
                <x-dynamic-component :component="$iconRight" class="fill-gray-500 dark:fill-gray-400 size-5" />
            </div>
        @endif
    </div>
    
    @if($error)
        <p class="text-sm text-error-500">{{ $error }}</p>
    @elseif($hint)
        <p class="text-sm text-gray-500 dark:text-gray-400">{{ $hint }}</p>
    @endif
</div>