<script setup>
import { watch } from 'vue';

const props = defineProps({
    modelValue: {
        type: Array,
        default: () => []
    },
    label: {
        type: String,
        required: true
    },
    placeholder: {
        type: String,
        default: 'https://...'
    },
    max: {
        type: Number,
        default: 5
    },
    error: {
        type: String,
        default: null
    }
});

const emit = defineEmits(['update:modelValue']);

const addLink = () => {
    if (props.modelValue.length >= props.max) return;
    emit('update:modelValue', [...props.modelValue, '']);
};

const removeLink = (index) => {
    const newValue = [...props.modelValue];
    newValue.splice(index, 1);
    emit('update:modelValue', newValue);
};

const updateLink = (index, value) => {
    const newValue = [...props.modelValue];
    newValue[index] = value;
    emit('update:modelValue', newValue);
};
</script>

<template>
    <div class="field md:col-span-2 space-y-2">
        <div class="flex items-center justify-between">
            <p class="text-xs font-medium text-surface-600 dark:text-surface-300">{{ label }}</p>
            <Button label="Добавить ссылку" icon="pi pi-plus" size="small" text severity="secondary" @click="addLink" />
        </div>
        <div class="space-y-2">
            <div v-for="(link, index) in modelValue" :key="index" class="flex items-center gap-2">
                <InputText :modelValue="link" :placeholder="placeholder" class="flex-1 text-xs" @update:modelValue="updateLink(index, $event)" />
                <Button icon="pi pi-times" severity="danger" text rounded size="small" @click="removeLink(index)" />
            </div>
        </div>
        <small v-if="error" class="p-error">{{ error }}</small>
    </div>
</template>
