<script setup lang="ts">
import { ResumeInputData } from '@/types/resume';
import ResumeComponentEditFormInput from './ResumeComponentEditFormInput.vue';

const props = defineProps<{
    data: ResumeInputData[]
}>();

const emit = defineEmits(['data-changed']);

function handleDataChanged(updatedData: ResumeInputData) {
    const index = props.data.findIndex(input => input.id === updatedData.id);
    const dataCopy = [...props.data];
    if (index !== -1) {
        dataCopy[index] = updatedData;
        emit('data-changed', dataCopy);
    }
}
</script>

<template>
    <form
        @submit.prevent="emit('data-changed', props.data)"
        class="w-full space-y-4"
    >
        <ResumeComponentEditFormInput v-for="input in props.data" :model="input" v-bind:key="input.id" @data-changed="handleDataChanged" />
    </form>
</template>
