@props([
    'id',
    'videoId',
    'placeholderId',
    'badgeText' => '',
    'badgeId' => null,
    'micStatusId' => null,
    'camStatusId' => null,
    'borderColor' => 'border-[#1b2233]',
    'showZoom' => false,
    'showFullscreen' => false,
    'initials' => 'CD',
    'avatarCircleId' => null,
    'avatarNameId' => null,
    'avatarTitle' => 'Video Stream',
    'zoomInFn' => null,
    'zoomOutFn' => null,
    'zoomResetFn' => null,
    'fullscreenFn' => null,
    'containerId' => null,
    'focused' => false,
])

<div id="{{ $id }}" {{ $attributes->twMerge(['class' => 'video-tile relative aspect-[16/10] bg-[#0d1220] border rounded-[10px] overflow-hidden flex flex-col items-center justify-center transition-all ' . ($focused ? 'border-[rgba(75,130,247,0.35)] shadow-[0_0_0_1px_rgba(75,130,247,0.35)]' : 'border-[#1b2233]')]) }}>
    @if($showZoom || $showFullscreen)
        <div class="tile-tools absolute top-2 right-2 z-20 flex gap-1">
            @if($showZoom)
                <button type="button" onclick="{{ $zoomInFn }}" class="w-6 h-6 rounded-md border border-[#232b3d] bg-[#0a0e17]/65 text-slate-400 hover:text-slate-200 text-[10.5px] cursor-pointer flex items-center justify-center" title="Zoom In"><i class="fa-solid fa-magnifying-glass-plus"></i></button>
                <button type="button" onclick="{{ $zoomOutFn }}" class="w-6 h-6 rounded-md border border-[#232b3d] bg-[#0a0e17]/65 text-slate-400 hover:text-slate-200 text-[10.5px] cursor-pointer flex items-center justify-center" title="Zoom Out"><i class="fa-solid fa-magnifying-glass-minus"></i></button>
                <button type="button" onclick="{{ $zoomResetFn }}" class="w-6 h-6 rounded-md border border-[#232b3d] bg-[#0a0e17]/65 text-slate-400 hover:text-slate-200 text-[10.5px] cursor-pointer flex items-center justify-center" title="Reset Zoom"><i class="fa-solid fa-rotate-left"></i></button>
            @endif
            @if($showFullscreen)
                <button type="button" onclick="{{ $fullscreenFn }}" class="w-6 h-6 rounded-md border border-[#232b3d] bg-[#0a0e17]/65 text-slate-400 hover:text-slate-200 text-[10.5px] cursor-pointer flex items-center justify-center" title="Fullscreen"><i class="fa-solid fa-expand"></i></button>
            @endif
        </div>
    @endif

    @if($containerId)
        <div id="{{ $containerId }}" class="w-full h-full overflow-auto">
            <video id="{{ $videoId }}" autoplay playsinline {{ in_array($videoId, ['interviewer-screen-video', 'interviewer-self-video']) ? 'muted' : '' }} class="w-full h-full object-contain origin-top-left transition-transform duration-200" style="{{ $videoId === 'interviewer-screen-video' ? 'transform: none;' : 'transform: scaleX(-1);' }}"></video>
        </div>
    @else
        <video id="{{ $videoId }}" autoplay playsinline {{ in_array($videoId, ['interviewer-screen-video', 'interviewer-self-video']) ? 'muted' : '' }} class="w-full h-full object-cover origin-center transition-transform duration-200" style="{{ $videoId === 'interviewer-screen-video' ? 'transform: none;' : 'transform: scaleX(-1);' }}"></video>
    @endif

    <div id="{{ $placeholderId }}" class="absolute inset-0 flex flex-col items-center justify-center bg-[#0d1220]/95 text-slate-400 text-xs z-10 p-3">
        <div id="{{ $avatarCircleId }}" class="av w-8 h-8 rounded-full bg-linear-to-br from-[#5b8bff] to-[#3b63e0] flex items-center justify-center text-white font-semibold text-xs mb-2.5 shadow-md shadow-[#4b82f7]/20">
            {{ $initials }}
        </div>
        <div id="{{ $avatarNameId }}" class="name text-xs font-semibold text-white">{{ $avatarTitle }}</div>
        <div class="status text-[8px] text-[#5b637a] mt-1 text-center px-3">
            {{ $slot->isNotEmpty() ? $slot : "Waiting for candidate&hellip;" }}
        </div>
    </div>

    <span class="tile-tag absolute left-1 bottom-1 text-[9px] font-semibold tracking-wide px-2.5 py-1 rounded-md bg-black/50 text-slate-300 border border-[#1b2233] z-20 flex items-center gap-1.5 backdrop-blur-sm">
        <span>{{ $badgeText }}</span>   
        @if($micStatusId || $camStatusId)
            <span class="w-px h-2.5 bg-white/20 mx-0.5"></span>
            @if($micStatusId)
                <i id="{{ $micStatusId }}" class="fa-solid fa-microphone text-[#21c274] text-[10px]" title="Mic On"></i>
            @endif
            @if($camStatusId)
                <i id="{{ $camStatusId }}" class="fa-solid fa-video text-[#21c274] text-[10px]" title="Camera On"></i>
            @endif
        @endif
    </span>
</div>