<script lang="ts">
	import * as Dialog from '$lib/components/ui/dialog/index.js';
    import { Button } from "$lib/components/ui/button/index.js";
	import { Input } from "$lib/components/ui/input/index.js";
    import { Label } from "$lib/components/ui/label/index.js";

    let { open = $bindable(), onSubmit  }: { open?: boolean, onSubmit: (name: string) => Promise<undefined> } = $props()
    let shelfName = $state('')

</script>


<Dialog.Root bind:open>
	<Dialog.Content class="sm:max-w-[425px]">
		<Dialog.Header>
			<Dialog.Title>Create bookshelf</Dialog.Title>
		</Dialog.Header>

        <div class="flex items-center gap-4">
            <Label>Name</Label>
            <Input bind:value={shelfName}/>
        </div>

		<!-- Buttons -->
		<Dialog.Footer class="ml-auto flex">
			<Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
			<Button
				onclick={async () => {
                    await onSubmit(shelfName);
				}}
				variant="default">Create</Button
			>
		</Dialog.Footer>
	</Dialog.Content>
</Dialog.Root>