<script setup lang="ts">
/**
 * Single row inside a RepeatableBlock.
 *
 * Provides its own isolated formId via Vue's inject/provide so every
 * child ElementRenderer binds to that row's slot in the formDataStore
 * rather than the parent form's slot.
 */
import type { CardElement } from "@/definitions/elements"
import ElementRenderer from "@/engine/ElementRenderer.vue"
import { provideFormId } from "@/engine/useFormData"

const props = defineProps<{
  /** Unique key for this row's isolated formDataStore entry. */
  formId: string
  /** CardElement schema for each field in the row. */
  schema: CardElement[]
  /** Read-only context item forwarded from the parent. */
  item: Record<string, unknown>
}>()

// Must be synchronous — provide happens during component setup so all
// descendant ElementRenderers pick it up before their own setup runs.
provideFormId(props.formId)
</script>

<template>
  <div class="flex flex-col gap-2">
    <ElementRenderer
      v-for="child in props.schema"
      :key="child.id"
      :element="child"
      :item="props.item"
    />
  </div>
</template>
