<script setup>
import Accordion from "primevue/accordion";
import AccordionPanel from "primevue/accordionpanel";
import AccordionHeader from "primevue/accordionheader";
import AccordionContent from "primevue/accordioncontent";

defineProps({
  modelValue: { type: [String, Number, Array], default: null },
  multiple: { type: Boolean, default: false },
  sections: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(["update:modelValue"]);
</script>

<template>
  <Accordion
    :value="modelValue"
    :multiple="multiple"
    v-bind="$attrs"
    @update:value="emit('update:modelValue', $event)"
  >
    <template v-if="sections.length">
      <AccordionPanel
        v-for="section in sections"
        :key="section.value"
        :value="section.value"
      >
        <AccordionHeader>{{ section.title }}</AccordionHeader>
        <AccordionContent>
          <slot :name="section.value" />
        </AccordionContent>
      </AccordionPanel>
    </template>
    <slot v-else />
  </Accordion>
</template>
