@props([
    'name' => 'file',
    'title' => 'Click to upload or drag',
    'description' => 'Acceptable file types: ' . implode(', ', array_map(fn($ext) => '.' . $ext, explode(',', str_replace('/*', '', $accept)))),
    'required' => false,
    'key' => null,
    'accept' => 'image/*',
    'style' => '',
])

<div x-data="{ fileName: '' }" class="bg-white mt-4 w-full relative p-4 text-gray-400 border border-gray-300 rounded-md shadow-sm" style="{{ $style }}" id="{{ $key }}">
    <div x-ref="dnd" class="relative text-gray-400 border-2 border-gray-200 border-dashed rounded cursor-pointer">
        <input 
            type="file" 
            id="file_upload_{{ $key }}" 
            name="{{ $name }}" 
            accept="{{ $accept }}" 
            x-ref="file" 
            @change="fileName = $refs.file.files[0]?.name || ''" 
            class="absolute inset-0 z-50 w-full h-full p-0 m-0 outline-none opacity-0 cursor-pointer"
            @dragover="$refs.dnd.classList.add('bg-indigo-50')"
            @dragleave="$refs.dnd.classList.remove('bg-indigo-50')"
            @drop="$refs.dnd.classList.remove('bg-indigo-50')"
            {{ $required ? 'required' : '' }}
        />
        <div class="flex flex-col items-center justify-center h-full text-center">
            <i class="bx bx-cloud-upload text-3xl text-gray-500 dark:text-gray-400"></i>
            <p class="text-xs text-gray-500 dark:text-gray-400">{{ $title }}</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ $description }}</p>
            <p class="text-xs text-main my-1" x-text="fileName"></p>
        </div>
    </div>
</div>