@props(['name', 'label', 'default' => null, 'required' => false, 'optimized' => false])

<div class="form-group">
    <label for="{{ $name }}" class="font-weight-bold text-dark">
        {{ $label }} @if($required) <span class="text-danger">*</span> @endif
    </label>

    @if($optimized)
        <div class="alert alert-info py-2 px-3 small border-0 mb-2" style="background-color: #e7f3ff; color: #004085;">
            <i class="fas fa-magic mr-1"></i> <strong>Optimización:</strong> Se convertirá a <strong>WebP</strong> automáticamente.
        </div>
    @endif
    
    <input 
        type="file" 
        id="{{ $name }}" 
        name="{{ $name }}" 
        class="dropify @error($name) is-invalid @enderror"
        data-height="150"
        data-allowed-file-extensions="jpg jpeg png webp"
        data-max-file-size="2M"
        {{-- Si hay una imagen guardada (edición), la mostramos --}}
        @if($default) data-default-file="{{ $default }}" @endif
        {{ $attributes }}
    >

    @error($name)
        <span class="text-danger small mt-1 d-block">
            <strong>{{ $message }}</strong>
        </span>
    @enderror
</div>