<template>
 <AccordionItem :active="active">
  <AccordionHeader :level="headerLevel">
   <AccordionButton>{{ title }}</AccordionButton>
  </AccordionHeader>
  <AccordionCollapse>
   <AccordionBody>
    <slot></slot>
   </AccordionBody>
  </AccordionCollapse>
 </AccordionItem>
</template>

<script setup>
import AccordionItem from "./AccordionItem";
import AccordionHeader from "./AccordionHeader";
import AccordionButton from "./AccordionButton";
import AccordionCollapse from "./AccordionCollapse";
import AccordionBody from "./AccordionBody";
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  active: {
    type: Boolean,
    default: false
  },
  headerLevel: {
    type: Number,
    default: 2
  }
});
</script>
