<template>
  <details class="Spoiler" :open="open">
    <summary @click="toggle"><Icon class="icon" :name="icon" mode="svg" />{{ title }}</summary>
    <div>
      <slot />
    </div>
  </details>
</template>

<script setup lang="ts">
type Props = {
  title: string
  answer ?: string
}

const { title, answer = '' } = defineProps<Props>()

const open = ref(false)
const toggle = (event : MouseEvent) => {
  event.preventDefault()
  open.value = !open.value
}

const icon = computed(() => open.value ? 'ph:minus-circle-duotone' : 'ph:plus-circle-duotone')
</script>