<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.description }}
      </div>
      <div>
        <span class="tw:font-bold tw:dark:text-slate-200 tw:mr-1">Категория:</span>
        <CategoryLabel :id="value.data.category_id"/>
      </div>
    </div>
  </BaseBlock>
</template>

<script setup>
import BaseBlock from "@/components/MainPageConfigurator/Blocks/BaseBlock.vue";
import CategoryLabel from "@/components/Form/CategoryLabel.vue";

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