@props([
    'name', 
    'label', 
    'value' => null, 
    'type' => 'text', 
    'placeholder' => '', 
    'required' => false, 
    'icon' => null, // Nuevo: Propiedad para el ícono
    'id' => null // Solución: Propiedad para permitir ID personalizado
])

<div class="form-group">
    {{-- Label con estilo --}}
    <label for="{{ $id ?? $name }}" class="font-weight-bold text-dark small text-uppercase" style="letter-spacing: 0.5px;">
        {{ $label }} 
        @if($required) <span class="text-danger" title="Campo obligatorio">*</span> @endif
    </label>
    
    <div class="@if($icon) input-group @endif shadow-sm">
        
        {{-- Ícono a la izquierda (Opcional) --}}
        @if($icon)
            <div class="input-group-prepend">
                <span class="input-group-text bg-white text-secondary border-right-0">
                    <i class="{{ $icon }}"></i>
                </span>
            </div>
        @endif

        {{-- Input --}}
        <input 
            type="{{ $type }}" 
            name="{{ $name }}" 
            id="{{ $id ?? $name }}" 
            value="{{ old($name, $value) }}"
            placeholder="{{ $placeholder }}"
            {{-- Fusionamos las clases base con las que mandes desde fuera --}}
            {{ $attributes->merge([
                'class' => 'form-control ' . ($icon ? 'border-left-0 pl-0' : '') . ($errors->has($name) ? ' is-invalid' : '')
            ]) }}
        >

        {{-- Mensaje de Error --}}
        @error($name)
            <span class="invalid-feedback d-block" role="alert">
                <i class="fas fa-exclamation-circle mr-1"></i> <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>
</div>





{{-- Input Simple (Como antes) --}}
{{-- <x-form.input name="nombre" label="Nombre del Producto" />

 Input con Ícono (NUEVO) 
<x-form.input 
    name="email" 
    label="Correo Electrónico" 
    type="email" 
    icon="fas fa-envelope" 
    placeholder="ejemplo@correo.com" 
/>

Input de Precio con Ícono de Dólar 
<x-form.input 
    name="precio" 
    label="Precio" 
    type="number" 
    icon="fas fa-dollar-sign" 
/> --}}