<!-- Reusable admin notes list (string[]) for users, classes, sessions -->
<template>
  <div class="admin-notes-field flex flex-column gap-2">
    <label v-if="label" class="font-semibold text-sm">{{ label }}</label>
    <p v-if="hint" class="text-muted text-xs m-0">{{ hint }}</p>

    <div v-for="(note, index) in model" :key="index" class="flex gap-2 align-items-start">
      <Textarea
        :modelValue="note"
        rows="2"
        class="w-full text-sm flex-grow-1"
        :placeholder="placeholder"
        @update:modelValue="updateNote(index, $event)"
      />
      <Button
        icon="pi pi-trash"
        text
        rounded
        size="small"
        severity="danger"
        :aria-label="'حذف یادداشت'"
        @click="removeNote(index)"
      />
    </div>

    <Button
      type="button"
      label="افزودن یادداشت ادمین"
      icon="pi pi-plus"
      text
      size="small"
      class="align-self-start"
      @click="addNote"
    />
  </div>
</template>

<script setup>
import Textarea from 'primevue/textarea';
import Button from 'primevue/button';

const model = defineModel({ type: Array, default: () => [] });

defineProps({
  label: { type: String, default: 'یادداشت‌های ادمین' },
  hint: {
    type: String,
    default: 'برای موارد غیرعادی یا نکات داخلی، یادداشت اضافه کنید'
  },
  placeholder: { type: String, default: 'یادداشت…' }
});

const addNote = () => {
  model.value = [...(model.value || []), ''];
};

const updateNote = (index, value) => {
  const next = [...(model.value || [])];
  next[index] = value;
  model.value = next;
};

const removeNote = (index) => {
  model.value = (model.value || []).filter((_, i) => i !== index);
};
</script>
