@props(['name', 'label', 'current' => null, 'help' => null])
<div>
    <span class="mb-1.5 block text-[11px] font-bold text-slate-700 dark:text-slate-200">{{ $label }}</span>
    <label class="group flex min-h-36 cursor-pointer items-center gap-4 rounded-2xl border border-dashed border-slate-300 bg-slate-50 p-3 transition hover:border-orange-400 hover:bg-orange-50/30 dark:border-slate-700 dark:bg-slate-900">
        @if($current)
            <img src="{{ asset(ltrim($current, '/')) }}" alt="Current {{ strtolower($label) }}" class="h-28 w-36 shrink-0 rounded-xl object-cover shadow-sm">
        @else
            <span class="grid h-28 w-36 shrink-0 place-items-center rounded-xl bg-white text-2xl text-slate-300 shadow-sm dark:bg-slate-800">+</span>
        @endif
        <span>
            <span class="block text-xs font-extrabold text-slate-700 group-hover:text-orange-600 dark:text-slate-200">Choose a replacement</span>
            <span class="mt-1 block text-[10px] leading-4 text-slate-400">PNG, JPG or WebP. Existing image remains when no file is selected.</span>
            @if($help)<span class="mt-1 block text-[10px] text-slate-400">{{ $help }}</span>@endif
        </span>
        <input type="file" name="{{ $name }}" accept="image/png,image/jpeg,image/webp" class="sr-only">
    </label>
    @if($errors->has(str_replace(['[', ']'], ['.', ''], $name)))<span class="mt-1 block text-[10px] font-semibold text-rose-600">{{ $errors->first(str_replace(['[', ']'], ['.', ''], $name)) }}</span>@endif
</div>