<script lang="ts">
	import { ExpandableToolbar } from '@manacore/shared-ui';
	import TodoToolbarContent from './TodoToolbarContent.svelte';

	interface Props {
		isCollapsed?: boolean;
		bottomOffset?: string;
		onCollapsedChange?: (isCollapsed: boolean) => void;
	}

	let { isCollapsed = true, bottomOffset = '70px', onCollapsedChange }: Props = $props();
</script>

<ExpandableToolbar
	{isCollapsed}
	{onCollapsedChange}
	{bottomOffset}
	collapsedTitle="Aufgaben-Optionen"
	expandedTitle="Schließen"
>
	{#snippet collapsedIcon()}
		<!-- Task/list icon -->
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			stroke-width="2"
			d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
		/>
	{/snippet}

	<TodoToolbarContent />
</ExpandableToolbar>
