<script setup>
import { ChevronDownIcon, ChevronRightIcon } from "lucide-vue-next";
import { ref } from "vue";

const collapsed = ref(true);

defineProps(["title"]);
</script>

<template>
  <div class="title" @click="collapsed = !collapsed">
    <ChevronRightIcon v-if="collapsed" />
    <ChevronDownIcon v-else />
    <span>{{ title }}</span>
  </div>
  <slot v-if="!collapsed" />
</template>

<style scoped>
.title {
  display: flex;
  align-items: center;
  gap: 5px;
  user-select: none;
  font-size: 19px;
  margin: 5px 0px;
}
</style>
