component Accordion {
    props {
        class = ""
        title = "Question"
        open = false
    }

    state expanded = open

    view {
        <div class="border-b border-slate-200 dark:border-slate-800 {class}" >
            <button
                type="button"
                class="flex w-full items-center justify-between gap-4 py-5 text-left font-semibold"
                aria-expanded="{expanded}"
                @click="expanded = !expanded"
            >
                <span >
                    {title}
                </span>
                <span class="text-xl transition-transform {expanded ? 'rotate-45' : ''}">+</span>
            </button>
            <div
                data-show="expanded"
                class="pb-5 text-slate-600 dark:text-slate-300"
            >
                <slot />
            </div>
        </div>
    }
}