<template>
  <div class="space-y-3 min-w-0">
    <div v-for="(header, index) in headers" :key="index" class="flex items-center gap-3 min-w-0">
      <input type="checkbox" v-model="header.active" class="w-4 h-4 flex-shrink-0" />
      <FormKit 
        type="text" 
        v-model="header.key" 
        placeholder="Key" 
        outer-class="!mb-0 flex-1 min-w-0" 
        inner-class="!mb-0" 
      />
      <FormKit 
        type="text" 
        v-model="header.value" 
        placeholder="Value" 
        outer-class="!mb-0 flex-1 min-w-0" 
        inner-class="!mb-0" 
      />
      <rs-button 
        variant="danger-outline" 
        size="sm" 
        @click="removeRow(index)" 
        class="flex-shrink-0"
      >
        <Icon name="ic:outline-delete" size="16" />
      </rs-button>
    </div>
    <rs-button variant="secondary-outline" size="sm" @click="addRow">
      Add Header
    </rs-button>
  </div>
</template>

<script setup>
const { addRow: addRowUtil, removeRow: removeRowUtil } = useApiRequest()

const props = defineProps({
  headers: {
    type: Array,
    required: true
  }
})

const addRow = () => {
  addRowUtil(toRef(props, 'headers'))
}

const removeRow = (index) => {
  removeRowUtil(toRef(props, 'headers'), index)
}
</script> 