@props([
    'variant' => 'skeleton',
    'label' => null,
    'progress' => null,
    'progressLabel' => null,
])

@php
    $variant = in_array($variant, ['skeleton', 'spinner', 'progress'], true) ? $variant : 'skeleton';
    $progressValue = is_numeric($progress) ? max(0, min(100, (int) $progress)) : null;
    $progressLabel = $progressLabel ?: ($progressValue !== null ? $progressValue.'%' : null);
    $accessibleLabel = $label ?: __('kview-ui-core::ui.common.loading');
@endphp

<div {{ $attributes->class(['ui-loading-state', 'ui-loading-state--'.$variant])->merge([
    'role' => 'status',
    'aria-live' => 'polite',
    'aria-busy' => 'true',
    'aria-label' => $accessibleLabel,
]) }}>
    @if ($variant === 'skeleton')
        <div class="ui-skeleton-layout" aria-hidden="true">
            <span class="ui-skeleton ui-skeleton-avatar"></span>
            <span class="ui-skeleton ui-skeleton-line ui-skeleton-line--wide"></span>
            <span class="ui-skeleton ui-skeleton-line ui-skeleton-line--short"></span>
            <span class="ui-skeleton ui-skeleton-block"></span>
        </div>
        <span class="ui-visually-hidden">{{ $accessibleLabel }}</span>
    @else
        <span class="ui-spinner" aria-hidden="true"></span>
        <div class="ui-loading-copy">
            @if ($label)
                <span>{{ $label }}</span>
            @endif
            @if ($variant === 'progress' && $progressValue !== null)
                <strong>{{ $progressLabel }}</strong>
            @endif
        </div>
        @if ($variant === 'progress' && $progressValue !== null)
            <div
                class="ui-progress-track"
                role="progressbar"
                aria-label="{{ $accessibleLabel }}"
                aria-valuemin="0"
                aria-valuemax="100"
                aria-valuenow="{{ $progressValue }}"
                aria-valuetext="{{ $progressLabel }}"
            >
                <span class="ui-progress-bar" style="width: {{ $progressValue }}%;"></span>
            </div>
        @endif
    @endif

    {{ $slot }}
</div>