<script>
    import Icon from "./common/Icon.svelte";

    export let label;
    let isExpanded = true;
</script>

<span class="sidebar-header d-flex align-items-center">
    {#if !isExpanded}
        <span class="d-flex" on:click={(e) => (isExpanded = true)}>
            <Icon icon="circle-chevron-down" viewBox="0 0 512 512" />
        </span>
    {/if}

    {#if isExpanded}
        <span class="d-flex" on:click={(e) => (isExpanded = false)}>
            <Icon icon="circle-chevron-up" viewBox="0 0 512 512" />
        </span>
    {/if}
    <span class="ms-1">{label}</span>
    <div class="actions">
        <slot name="actions" />
    </div>
</span>
{#if isExpanded}
    <div class="mb-2">
        <slot />
    </div>
{/if}
