<template>
  <BaseBlock
    :title="`Слайдер - ${value.title || 'Без заголовка'}`"
    @onRemove="$emit('onRemove')"
    @onShowSettings="$emit('onShowSettings')"
  >
    <div class="tw:mt-3 tw:text-sm tw:dark:text-slate-300 tw:space-y-1">
      <div><span class="tw:font-bold tw:dark:text-slate-200">Статус:</span>
        {{ value.is_enabled ? 'Включен' : 'Выключен' }}
      </div>
      <div><span class="tw:font-bold tw:dark:text-slate-200">Эффект:</span>
        {{ sliderEffectOptions[value.data.effect] || value.data.effect }}
      </div>
      <div><span class="tw:font-bold tw:dark:text-slate-200">Авто:</span>
        {{ value.data.autoplay ? 'Включен' : 'Выключен' }}
      </div>
      <div><span class="tw:font-bold tw:dark:text-slate-200">Цель Яндекс.Метрики:</span>
        {{ value.goal_name || 'Не задана' }}
      </div>
    </div>

    <div class="tw:mt-6 tw:flex tw:flex-wrap tw:gap-4">
      <img
        v-if="value.data.slides && value.data.slides.length > 0"
        v-for="slide in value.data.slides"
        :alt="slide.title"
        class="tw:w-24 tw:h-24 tw:object-cover tw:rounded-md tw:border-2 tw:border-slate-200 dark:tw:border-slate-600"
        :src="getThumb(slide.image)"
      />
    </div>
  </BaseBlock>
</template>

<script setup>
import {getThumb} from "@/utils/helpers.js";
import {sliderEffectOptions} from "@/utils/constants..js";
import BaseBlock from "@/components/MainPageConfigurator/Blocks/BaseBlock.vue";

const emit = defineEmits(['onRemove', 'onShowSettings']);
const props = defineProps({
  value: {
    type: Object,
    required: true,
  }
});
</script>
