<script lang="ts">
	export let expandButtonText = 'Expand';
	let expanded = false;
</script>

<div class="container">
	<button
		on:click={() => {
			expanded = !expanded;
		}}>{expandButtonText}</button
	>
	<div class={`content ${expanded ? 'expanded' : 'collapsed'}`}>
		<slot />
	</div>
</div>

<style>
	.container {
		display: flex;
		flex-direction: column;
	}
	.content {
		flex: 1;
		overflow: hidden;
		transition: flex 0.5s ease-in-out;
	}
	.content.collapsed {
		flex: 0;
	}
</style>
