<template>
  <div class="space-y-3">
    <!-- Root Components -->
    <div v-for="component in components" :key="component.id">
      <ComponentItem
        :component="component"
        :is-edit-mode="isEditMode"
        :show-delete="showDelete"
        :collapse-all="collapseAll"
        :toggle-token="toggleToken"
        @update="$emit('update', $event)"
        @edit-piece="$emit('edit-piece', $event)"
        @custom-field-update="$emit('custom-field-update', $event)"
        @delete="$emit('delete')"
        @fill-entity="(linkId, typeId) => $emit('fill-entity', linkId, typeId)"
      />
    </div>
  </div>
</template>

<script setup>
import ComponentItem from './ComponentItem.vue'

defineProps({
  components: {
    type: Array,
    required: true
  },
  isEditMode: {
    type: Boolean,
    default: false
  },
  showDelete: {
    type: Boolean,
    default: false
  },
  collapseAll: {
    type: Boolean,
    default: true
  },
  toggleToken: {
    type: Number,
    default: 0
  }
})

defineEmits(['update', 'edit-piece', 'custom-field-update', 'delete', 'fill-entity'])
</script>
