<script lang="ts">
    export let open = false;
</script>

<div class="w-full">
    <button
        type="button"
        class="flex items-center justify-between w-full px-2 py-2 text-left rounded hover:font-bold transition group"
        on:click={() => open = !open}
        aria-expanded={open}
    >
        <span><slot name="label"/></span>
        <svg
            class="w-5 h-5 ml-2 transition-transform duration-200"
            style="transform: rotate({open ? 90 : 0}deg)"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            viewBox="0 0 24 24"
        >
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
        </svg>
    </button>
    <div
        class="overflow-hidden transition-all duration-300"
        style="max-height: {open ? '1000px' : '0'}"
        aria-hidden={!open}
    >
        <div class="pt-2">
            <slot name="content"/>
        </div>
    </div>
</div>