@props([
    'name' => 'file',
    'accept' => '',
    'multiple' => false,
    'hint' => 'PNG, JPG or PDF up to 10MB',
])

<div {{ $attributes->merge(['class' => 'bv-file-uploader']) }}
     x-data="{ dragover: false }"
     x-on:dragover.prevent="dragover = true"
     x-on:dragleave.prevent="dragover = false"
     x-on:drop.prevent="dragover = false"
     :class="{ 'is-dragover': dragover }">
    <div class="bv-file-uploader__icon" aria-hidden="true">
        <i class="bi bi-cloud-arrow-up"></i>
    </div>
    <div class="bv-file-uploader__text">
        <label for="{{ $name }}-input" class="text-primary fw-medium" role="button">
            Click to upload
        </label>
        or drag and drop
    </div>
    <div class="bv-file-uploader__hint">{{ $hint }}</div>
    <input type="file"
           id="{{ $name }}-input"
           name="{{ $name }}"
           class="d-none"
           @if($accept) accept="{{ $accept }}" @endif
           @if($multiple) multiple @endif>
</div>