@props([
    'id',
    'label' => 'Seleccionar archivo'
])

<div x-data="{ fileName: '' }" class="w-full">
    <x-input-label :for="$id" :value="$label" />

    <div class="mt-1 relative">
        <input
            type="file"
            name="{{ $id }}"
            id="{{ $id }}"
            {{ $attributes }}   {{-- Esto permite pasar atributos extra como data-id --}}
            class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
            @change="fileName = $event.target.files[0]?.name"
        />
        <div class="flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm text-sm text-gray-700 z-0">
            <svg class="w-5 h-5 mr-2 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M4 4v16h16V4H4zm4 4h8M4 12h16M4 16h16" />
            </svg>
            <span x-text="fileName || 'Seleccionar archivo'"></span>
        </div>
    </div>
</div>