<script setup>
import { ref } from 'vue'

const props = defineProps({
  title: { type: String, required: true },
  defaultOpen: { type: Boolean, default: false },
  sectionId: { type: String, default: undefined },
})

const open = ref(props.defaultOpen)
const panelId = props.sectionId ? `${props.sectionId}-panel` : undefined
const headerId = props.sectionId ? `${props.sectionId}-header` : undefined

function toggle() {
  open.value = !open.value
}
</script>

<template>
  <section :aria-labelledby="headerId">
    <button
      :id="headerId"
      type="button"
      class="flex min-h-11 w-full items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 text-left text-sm font-semibold text-gray-900 transition hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800"
      :aria-expanded="open"
      :aria-controls="panelId"
      @click="toggle"
    >
      <span>{{ title }}</span>
      <svg
        class="h-5 w-5 shrink-0 text-gray-500 transition-transform dark:text-gray-400"
        :class="open ? 'rotate-180' : ''"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        aria-hidden="true"
      >
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
      </svg>
    </button>
    <div
      v-show="open"
      :id="panelId"
      :aria-labelledby="headerId"
      class="mt-4 space-y-4"
    >
      <slot />
    </div>
  </section>
</template>
