{{--
    Input Component - AdminLTE Theme
    Based on AdminLTE v4 Form Control styling patterns
    
    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' => 'lte-form-control-sm',
        'md' => '',
        'lg' => 'lte-form-control-lg',
    ];
    $sizeClass = $sizeClasses[$size] ?? '';
@endphp

<div {{ $attributes->only('class')->class(['mb-3']) }}>
    @if($label)
        <label @if($name) for="{{ $name }}" @endif class="form-label" style="margin-bottom: 0.5rem; display: block; font-weight: 500;">
            {{ $label }}
            @if($required)
                <span class="lte-text-danger">*</span>
            @endif
        </label>
    @endif
    
    @if($icon || $iconRight)
        <div class="lte-input-group">
            @if($icon)
                <span class="lte-input-group-text">
                    <x-dynamic-component :component="$icon" class="size-4" />
                </span>
            @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(['lte-form-control', $sizeClass, 'is-invalid' => $error]) }}
            />
            
            @if($iconRight)
                <span class="lte-input-group-text">
                    <x-dynamic-component :component="$iconRight" class="size-4" />
                </span>
            @endif
        </div>
    @else
        <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(['lte-form-control', $sizeClass, 'is-invalid' => $error]) }}
        />
    @endif
    
    @if($error)
        <div class="invalid-feedback" style="display: block; color: var(--lte-danger); font-size: 0.875rem; margin-top: 0.25rem;">{{ $error }}</div>
    @elseif($hint)
        <div class="form-text lte-text-muted" style="font-size: 0.875rem; margin-top: 0.25rem;">{{ $hint }}</div>
    @endif
</div>