<!-- Тоггл автозапуска следующего видео (состояние в localStorage) -->
<template>
  <div class="player-autoplay">
    <button
      type="button"
      class="player-autoplay__button"
      @click="value = !value"
    >
      {{ $t('autoplay_next_video')}}
    </button>
    <UiToggle
      v-model="value"
      class="player-autoplay__toggle"
    />
  </div>
</template>

<script setup lang="ts">
const value = ref(true);

onMounted(() => {
  const saved: string | null = localStorage.getItem('autoplay');
  if (!saved) {
    localStorage.setItem('autoplay', 'on');
  }
  value.value = saved === null ? true : saved === 'on';
});

watch(() => value.value, (newValue) => localStorage.setItem('autoplay', newValue ? 'on' : 'off'));
</script>

<style lang="scss">
.player-autoplay {
  @include font-xs;

  font-weight: 400;

  @include from-br(sm) {
    display: flex;
    column-gap: 8px;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-radius: 16px;
    color: $video-autoplay-text;
    text-align: start;
  }

  @include hover(opacity) {
    opacity: 0.9;
  }
}
</style>
