@props([
    'fileId' => null,
    'url' => null,
    'mimeType' => null,
    'styles' => null,
    'deferLoad' => true,
])
@php($url = $url ?: route('files.get', $fileId))

<div>
    @switch($mimeType?? '')
        @case('image/jpeg') @case('image/png') @case('image/jpg')
            @if($deferLoad) 
                <x-ui.image
                    x-bind:src="open == {{ $fileId }}? '{{ $url }}?time=' + Date.now() : ''" 
                    class="h-max-500px shadow-sm" style="{{ $styles?: '' }}"
                />
            @else 
                <x-ui.image
                    src="{{ $url }}?time={{ time() }}" 
                    class="h-max-500px shadow-sm" style="{{ $styles?: '' }}"
                />
            @endif
        @break

        @case('application/pdf')
            @if($deferLoad)
                <object
                    data="{{ $url }}?time={{ time() }}#view=FitH"
                    type="application/pdf" 
                    class="pdf-preview-object"
                    style="{{ $styles?: '' }}"
                ></object>
            @else
                <object
                    data="{{ $url }}?time={{ time() }}#view=FitH"
                    type="application/pdf" 
                    class="pdf-preview-object"
                    style="{{ $styles?: '' }}"
                ></object>
            @endif
        @break
            
        @default
            <em>Visualisation indisponible</em>
            
    @endswitch
</div>