<script>
	import Upload from '@lucide/svelte/icons/upload';
	import { buttonVariants } from '$lib/components/ui/button/button.svelte';
	import * as Tooltip from '$lib/components/ui/tooltip/index';
	import BooksUpload from '$lib/components/forms/books-upload.svelte';
	import { goto } from '$app/navigation';
	import { getBookOperationsState } from '$lib/state/bookOperations.svelte';

	const bookOps = getBookOperationsState();
</script>

<Tooltip.Provider>
	<Tooltip.Root ignoreNonKeyboardFocus>
		<Tooltip.Trigger
			onclick={async () => {
				bookOps.uploadDialogOpen = true;
			}}
			class="{buttonVariants({ variant: 'ghost', size: 'icon' })} scale-110"
		>
			<Upload class="scale-110" />
		</Tooltip.Trigger>

		<Tooltip.Content>
			<p>Upload Book</p>
		</Tooltip.Content>
	</Tooltip.Root>
</Tooltip.Provider>

<BooksUpload bind:open={bookOps.uploadDialogOpen} />
