@props([
    'name', 
    'label', 
    'value' => null, 
    'rows' => 3, 
    'placeholder' => '', 
    'required' => false,
    'icon' => null // Nuevo: Propiedad para ícono
])

<div class="form-group">
    {{-- Label Estilizado (Consistente con Input y Select) --}}
    <label for="{{ $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 (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

        {{-- Textarea --}}
        <textarea 
            name="{{ $name }}" 
            id="{{ $name }}" 
            rows="{{ $rows }}"
            placeholder="{{ $placeholder }}"
            {{-- Merge de clases para manejar bordes, iconos y errores --}}
            {{ $attributes->merge([
                'class' => 'form-control ' . ($icon ? 'border-left-0' : '') . ($errors->has($name) ? ' is-invalid' : '')
            ]) }}
        >{{ old($name, $value) }}</textarea>

        {{-- Mensaje de Error con Ícono --}}
        @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>




{{-- Dirección con ícono de mapa (Se ve genial) --}}
{{-- <x-form.textarea 
    name="direccion" 
    label="Dirección Fiscal" 
    icon="fas fa-map-marker-alt" 
    placeholder="Calle, Av, Estado..." 
    rows="2"
/> --}}