<template>
  <div class="border border-gray-300 rounded mb-4">
    <div @click="toggle" class="w-[98%] p-3 bg-gray-100 bg-opacity-50 rounded hover:bg-gray-200 text-left text-white font-default cursor-pointer transition-colors duration-200 ease-in-out">
      <slot name="header" />
    </div>
    <transition enter-active-class="transition-all duration-300 ease-in-out" leave-active-class="transition-all duration-300 ease-in-out" enter-from-class="opacity-0 max-h-0" enter-to-class="opacity-100 max-h-96" leave-from-class="opacity-100 max-h-96" leave-to-class="opacity-0 max-h-0">
      <div v-if="isOpen" class="p-3 overflow-hidden">
        <slot name="content" />
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const isOpen = ref(false)

const toggle = () => {
  isOpen.value = !isOpen.value
}
</script>
