@props([
    'icon' => null,
    'mode' => null,
    'type' => 'text',
])

<div class="relative">
    <div class="absolute top-0 left-0 flex items-center h-full px-2">
        <x-icon :name="$icon" class="w-3" />
    </div>
    @if ($type === 'file')
        <div x-data="{ fileName: '' }">

            {{-- Hidden file input --}}
            <input type="file" x-ref="fileInput" class="absolute inset-0 z-10 w-full h-full opacity-0 cursor-pointer"
                @change="fileName = $event.target.files[0]?.name" {{ $attributes }} />

            {{-- Fake input --}}
            <input type="text" readonly
                class="w-full px-2 py-1 pl-8 pr-24 border border-gray-300 rounded-md focus:outline-0 focus:ring-amber-500 focus:border-amber-500"
                :value="fileName" placeholder="{{ $attributes->get('placeholder', 'Pilih file...') }}" />

            {{-- Browse button --}}
            <div class="absolute top-0 right-0 flex items-center h-full px-4 text-sm text-gray-800 transition bg-white cursor-pointer focus:bg-amber-500 rounded-r-md"
                @click="$refs.fileInput.click()">
                Browse
            </div>
        </div>
    @elseif ($mode === 'textarea')
        <textarea {{ $attributes }} rows="3"
            class="w-full px-2 py-1 pl-8 border border-gray-300 rounded-md resize-none focus:outline-0 focus:ring-amber-500 focus:border-amber-500"></textarea>
    @else
        <input type="{{ $type }}" {{ $attributes }}
            class="w-full px-2 py-1 pl-8 border border-gray-300 rounded-md focus:outline-0 focus:ring-amber-500 focus:border-amber-500" />
    @endif
</div>