<template>
  <details class="Spoiler" :open="open" @click="toggle">
    <summary><Icon class="icon" :name="icon" mode="svg" />{{ header }}</summary>
    <div>
      <p v-for="text in content">{{ text }}</p>
    </div>
  </details>
</template>

<script setup lang="ts">
type Props = {
  header: string
  content: string[]
}

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>