@props([
    'user',
    'fileInputId' => 'portal-avatar-file',
    'cameraInputId' => 'portal-avatar-camera',
    'layout' => 'inline',
])

@php
    $stacked = $layout === 'stacked';
@endphp

<div @class([
    'portal-avatar-widget',
    'portal-avatar-widget--stacked' => $stacked,
    'portal-avatar-widget--inline' => ! $stacked,
])>
    <div
        class="portal-avatar-widget__preview relative flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-gray-200 font-bold text-gray-600 shadow-md ring-4 ring-white"
        :class="{ 'bg-[var(--portal-primary)] text-white': ! previewUrl }"
    >
        <img
            x-show="previewUrl"
            x-on:error="onPreviewError()"
            :src="previewUrl"
            alt=""
            class="h-full w-full object-cover"
        />
        <span x-show="! previewUrl" x-cloak>{{ $user->avatarInitial() }}</span>
    </div>

    <div class="portal-avatar-widget__body min-w-0">
        <p class="portal-avatar-widget__hint text-sm leading-relaxed text-gray-600">
            JPG, PNG ou WebP — até 5 MB.
        </p>

        <div class="portal-avatar-widget__pickers">
            {{-- label + input nativos: click() via JS falha em vários Android/iOS --}}
            <input
                type="file"
                id="{{ $cameraInputId }}"
                accept="image/*"
                capture="user"
                class="portal-avatar-widget__file-input"
                x-on:change="onCameraSelected($event)"
            />
            <label
                for="{{ $cameraInputId }}"
                class="portal-avatar-widget__picker-btn portal-avatar-widget__picker-btn--camera"
            >
                <i class="fa-solid fa-camera" aria-hidden="true"></i>
                Tirar foto
            </label>

            <input
                type="file"
                id="{{ $fileInputId }}"
                name="avatar"
                accept="image/*"
                class="portal-avatar-widget__file-input"
                x-on:change="onFileSelected($event)"
            />
            <label
                for="{{ $fileInputId }}"
                class="portal-avatar-widget__picker-btn portal-avatar-widget__picker-btn--gallery"
            >
                <i class="fa-solid fa-image" aria-hidden="true"></i>
                Escolher imagem
            </label>
        </div>

        <p x-show="fileName" x-cloak class="truncate text-center text-xs text-gray-500 sm:text-left" x-text="fileName"></p>
        <x-form.error name="avatar" />
    </div>
</div>