<script lang="ts">
	import { Button } from '$lib/components/ui/button';
	import ChevronLeft from '@lucide/svelte/icons/chevron-left';
	import ChevronRight from '@lucide/svelte/icons/chevron-right';
	import List from '@lucide/svelte/icons/list';

	interface Props {
		novelId: string;
		prevChapterOrder: number | null | undefined;
		nextChapterOrder: number | null | undefined;
		showKeyboardHints?: boolean;
	}

	let { novelId, prevChapterOrder, nextChapterOrder, showKeyboardHints = true }: Props = $props();

	const hasPrev = $derived(prevChapterOrder != null);
	const hasNext = $derived(nextChapterOrder != null);
</script>

<div class="flex flex-col gap-2">
	<div class="flex items-center justify-between gap-4">
		<Button
			variant="outline"
			href={hasPrev ? `/novels/${novelId}/chapters/${prevChapterOrder}` : undefined}
			disabled={!hasPrev}
			class="gap-2"
		>
			<ChevronLeft class="h-4 w-4" />
			<span class="hidden sm:inline">Previous</span>
		</Button>

		<Button variant="outline" href="/novels/{novelId}" class="gap-2">
			<List class="h-4 w-4" />
			<span class="hidden sm:inline">Contents</span>
		</Button>

		<Button
			variant="outline"
			href={hasNext ? `/novels/${novelId}/chapters/${nextChapterOrder}` : undefined}
			disabled={!hasNext}
			class="gap-2"
		>
			<span class="hidden sm:inline">Next</span>
			<ChevronRight class="h-4 w-4" />
		</Button>
	</div>

	{#if showKeyboardHints}
		<p class="text-muted-foreground hidden text-center text-xs md:block">
			Use <kbd class="bg-muted rounded px-1 py-0.5 text-xs">←</kbd> and
			<kbd class="bg-muted rounded px-1 py-0.5 text-xs">→</kbd> arrow keys to navigate
		</p>
	{/if}
</div>
