<script lang="ts">
	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
	import * as Empty from '$lib/components/ui/empty/index.js'
	import { Button } from '$lib/components/ui/button/index.js'
	import BookList from '$lib/components/view/book-list.svelte';
	import { FolderX, Upload } from '@lucide/svelte';
	import { getBookOperationsState } from '$lib/state/bookOperations.svelte.js';

	let { data } = $props();

	let bookOps = getBookOperationsState()

</script>

<ScrollArea class="h-full w-full">
	<div class="mr-2 flex flex-col gap-8 p-4">
		<BookList books={data.continueReading} title="Continue Reading" />
		<BookList books={data.recentlyAdded} title="Recently Added" />
		<BookList books={data.discover} title="Discover" />
		<BookList books={data.readAgain} title="Read Again" />
	</div>

	{#if data.recentlyAdded.length === 0 }
		<div class="flex flex-col items-center justify-center w-full h-full">
			<!-- Show a CTA to upload books if the library is empty -->
			<Empty.Root class="mb-[12vh]">
				<Empty.Header>
					<Empty.Media variant="icon">
						<FolderX />
					</Empty.Media>
					<Empty.Title>Library Empty</Empty.Title>
					<Empty.Description>
						This library doesn't have any books yet. Get started by uploading your first books.
					</Empty.Description>
				</Empty.Header>
				<Empty.Content>
					<Button onclick={async () => (bookOps.uploadDialogOpen = true)}>
						<Upload />
						Upload Books
					</Button>
				</Empty.Content>
			</Empty.Root>
		</div>
	{/if}
</ScrollArea>
