<script lang="ts" context="module">
	import { writable, type Writable } from 'svelte/store';

	interface ToolbarContext {
		expand: boolean;
	}

	function initToolbarContext() {
		return setContext<Writable<ToolbarContext>>('toolbar', writable({ expand: false }));
	}

	export function getToolbarContext() {
		return getContext<Writable<ToolbarContext>>('toolbar');
	}
</script>

<script lang="ts">
	import { getContext, setContext } from 'svelte';

	const toolbar = initToolbarContext();
</script>

<div class="flex flex-col">
	<div
		class="flex flex-row flex-wrap gap-4 text-sm xl:grid xl:grid-flow-col xl:grid-cols-[1fr_2fr_1fr]"
	>
		<div class="flex flex-row justify-start gap-2">
			<slot name="start" />
		</div>
		<div class="flex flex-row flex-wrap justify-start gap-2 xl:flex-nowrap xl:justify-center">
			<slot name="center" />
		</div>
		<div class="flex flex-row justify-end gap-2">
			<slot name="end" />
		</div>
	</div>
	{#if $toolbar.expand}
		<div class="mt-4">
			<slot />
		</div>
	{/if}
</div>