<script lang="ts">
  import { idVideoActive, loadEvent } from '../../store';
  import loadObserver from '$utils/loadObserver';
  import scrollLock from '$utils/scrollLock';

  export let className: string | undefined = '';

  export let idVideo: string;
  export let image: string;
  export let title: string;
  export let text: string;

  loadEvent.set(false);

  const onload = loadObserver(() => {
    loadEvent.set(true);
  });

  const onClick = (id: string) => {
    idVideoActive.set(id);
    scrollLock(true);
  };
</script>

<div
  class="card-video {className}"
  on:click={() => onClick(idVideo)}
  on:keydown={() => false}
  tabindex="0"
  role="button"
>
  <div class="card-video__header">
    <img use:onload src={image} alt="" class="card-video__image" />
  </div>
  <div class="card-video__body">
    <p class="card-video__name">{title}</p>
    <p class="card-video__post">{text}</p>
  </div>
</div>

<style lang="scss">
  @import 'src/scss/media';
  @import 'src/scss/mixins';
  @import 'src/scss/variables';

  .card-video {
    user-select: none;
    cursor: pointer;
    width: 100%;

    &__header {
      margin-bottom: 16px;
    }

    &__image {
      overflow: hidden;
      border-radius: 8px;
      height: 240px;
      object-fit: cover;
      object-position: center;
      background: rgba(217, 217, 217, 1);

      @include breakpoint-down('deskL') {
        height: 192px;
      }

      @include breakpoint-down('deskS') {
        height: 183px;
      }
    }

    &__name {
      @include titleM;

      padding-right: 40px;
      margin-bottom: 8px;

      @include breakpoint-down('deskL') {
        padding-right: 0;
      }
    }

    &__post {
      @include smallDefault;
    }
  }
</style>