<script lang="ts">
	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';

	interface Props {
		novelId?: string;
	}

	let { novelId }: Props = $props();
</script>

<Card class="shadow-md shadow-primary/10">
	<CardHeader>
		<CardTitle>Novel Details</CardTitle>
	</CardHeader>
	<CardContent>
		<p class="text-sm text-muted-foreground">
			{#if novelId}
				Viewing novel ID: <code class="rounded bg-muted px-1 py-0.5">{novelId}</code>
			{/if}
		</p>
		<p class="mt-2 text-sm text-muted-foreground">
			Detail view coming soon. Select a novel to explore chapters and metadata once implemented.
		</p>
	</CardContent>
</Card>
