<script setup lang="ts">
import Accordion from 'primevue/accordion';
import VAccordionChild from './VAccordionChild.vue';
import type IVAccordion from './IVAccordion.type';
import { ref, watch } from 'vue';

const props = withDefaults(defineProps<IVAccordion>(), {
  value: null,
});

const emit = defineEmits([
  'update:value',
])

const localValue = ref(props.value);
watch(() => props.value, (newVal) => {
  if(localValue.value !== newVal) {
    localValue.value = newVal;
  }
});

watch(localValue, (newVal) => {
  if(props.value !== newVal){
    emit('update:value', newVal);
  }
});
</script>

<template>
  <Accordion
    v-model:value="localValue"
    class="p-accordion"
    style="width: 100%;"
    @update:value="emit('update:value', $event)"
  >
    <slot>
      <VAccordionChild/>
    </slot>
  </Accordion>
</template>
