<script lang="ts">
	import type { ExtractPayload, Todo } from '@<@var(context.project.name)>/rpc';
	import { getTodoCollection } from '$lib/todocollectionscontext';

	const todoCollection = getTodoCollection();
	let todo = $state<ExtractPayload<Todo>>({
		id: crypto.randomUUID(),
		task: '',
		done: false
	});

	const insertTodo = () => {
		todoCollection.insert({ ...todo });
		todo = {
			id: crypto.randomUUID(),
			task: '',
			done: false
		};
	};
</script>

<input class="rounded-md border px-3 py-1" type="text" bind:value={todo.task} />
<button class="cursor-pointer rounded-md bg-teal-800 p-1 text-teal-100" onclick={insertTodo}>
	create
</button>
