@php $videoPlayerId = (isset($videoPlayerId) ? $videoPlayerId : 'random-video-' . mt_rand())  @endphp

<div class="c-video">
     <div class="c-video__main">
          <div class="c-video__image" data-kal="move-up" style="--kal-duration: 2.4s;">
               <img class="c-video__img"
                    src="{{!empty($component->image->first()) ? $component->image->first()->medium_image_url : '/img/placeholder-video.svg'}}"
                    />
          </div>

          @if(!empty($component->text) || (isset($videoLink) && $videoLink != null))
               <div class="c-video__description">
                    <div class="s-text  s-text--on-dark" data-kal="slide-left" style="--kal-duration: 1.6s;">{!! $component->text !!}</div>
               </div>
          @endif

          @if(isset($videoLink) && $videoLink != null)
               <a class="c-video__button  js-open-video-modal" href="https://www.youtube.com/watch?v={{$videoLink}}" data-youtube-id="{{$videoLink}}">
                    <span class="c-video__circle" data-kal="zoom-in" style="--kal-duration: 1.6s;">
                         <span class="c-video__play">@include('components.icons.play')</span>
                    </span>
                    <span class="c-video__text-button">Bekijk video</span>
               </a>
          @endif
     </div>
</div>