<script lang="ts">
	import type { Todo, ExtractPayload } from "@<@var(context.project.name)>/rpc";
	import Input from "$lib/components/ui/input/input.svelte";
	import Button from "$lib/components/ui/button/button.svelte"
	import * as Field from "$lib/components/ui/field/index"
	import { getTodoCollection } from "$lib/todocollectionscontext";
	const todoCollection = getTodoCollection();
  let todo = $state<ExtractPayload<Todo>>({id: crypto.randomUUID() ,task: "",done:false})
  let create = () => {
    todoCollection.insert(todo)
    todo = { id: crypto.randomUUID(), task: "", done:false }
  }
</script>

<div class="flex flex-col items-center justify-center">
  <Field.FieldGroup class="w-50">
  <Field.Field>
    <Field.Label>
      Todo
    </Field.Label>
    <Input bind:value={todo.task}/>
  </Field.Field>
  <Button variant="outline" onclick={create} > Create </Button>
  </Field.FieldGroup>
</div>
