<script lang="ts">
	import type { Book } from '$lib/server/db/schema';

	interface Props {
		book: Book;
		authorHandle?: string;
	}
	let { book, authorHandle }: Props = $props();

	function formatDate(dateString: string) {
		return new Date(dateString).toLocaleDateString();
	}
</script>

<div
	class="rounded-lg border border-ctp-surface2 bg-ctp-surface1 p-4 transition-colors hover:bg-ctp-surface2"
>
	<h4 class="mb-1 font-semibold text-ctp-text">{book.title}</h4>
	<p class="mb-2 text-sm text-ctp-subtext1">by {book.authors.join(', ')}</p>

	<div class="space-y-1">
		<p class="text-xs text-ctp-overlay1">Added: {formatDate(book.createdAt)}</p>
		{#if authorHandle !== undefined}
			<p class="truncate text-xs text-ctp-overlay0">
				By: {authorHandle || book.authorDid}
			</p>
		{/if}
	</div>
</div>
