<template>
  <div class="space-y-4">
    <!-- Root Components -->
    <div v-for="component in components" :key="component.id" class="border border-gray-200 rounded-lg p-4">
      <ComponentItem 
        :component="component"
        :is-edit-mode="isEditMode"
        @update="$emit('update', $event)"
        @edit-piece="$emit('edit-piece', $event)"
      />
    </div>
  </div>
</template>

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

defineProps({
  components: {
    type: Array,
    required: true
  },
  isEditMode: {
    type: Boolean,
    default: false
  }
})

defineEmits(['update', 'edit-piece'])
</script> 