@props([
    'name' => '',
    'value' => '',
    'placeholder' => 'URL ou cliquer pour uploader',
    'inputClass' => 'w-full border border-slate-200 rounded-lg px-3 py-2',
])

<div class="image-input-group flex flex-col gap-2" data-storage-base="{{ url('storage') }}">
    <div class="flex gap-2 items-center min-w-0">
        <input type="text"
               name="{{ $name }}"
               value="{{ $value }}"
               placeholder="{{ $placeholder }}"
               class="{{ $inputClass }} flex-1 min-w-0"
               data-image-text-input
               {{ $attributes->except(['class']) }}
        >
        <label class="shrink-0 cursor-pointer inline-flex items-center justify-center w-10 h-10 rounded-lg border border-slate-200 bg-slate-50 hover:bg-primary-50 hover:border-primary-200 text-slate-500 hover:text-primary-600 transition" title="Uploader depuis l'ordinateur">
            <input type="file" accept="image/*" class="hidden" data-image-upload>
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
        </label>
    </div>
    <img src="" alt="" data-image-preview class="hidden max-h-32 w-auto max-w-full rounded-lg border border-slate-200 object-contain bg-slate-50" width="160" height="120" loading="lazy" decoding="async">
</div>
