<script lang="ts" setup>
  import type { CategoryConfigType, NodeItemConfigType } from '../../../types/node';
  import SidebarNodeItem from './SidebarNodeItem.vue';

  defineProps<{
    category?: CategoryConfigType;
    components?: NodeItemConfigType[];
  }>();
</script>

<template>
  <section
    class="rule-designer-collapse-container w-full flex items-center flex-col gap-2 relative"
    :class="components?.length ? 'p-4' : 'p-0'"
  >
    <SidebarNodeItem
      v-for="item in components"
      :key="item.key"
      :config="item"
      :category="category"
    />
  </section>
</template>

<style scoped>
  .rule-designer-collapse-container::after {
    @apply dark:bg-dark-500;

    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    z-index: 1;
    top: 0;
    background-color: #fff;
  }
</style>