---
type Book = {
	id: number;
	title: string;
	authors: string;
	cover_url: string | null;
	notes: string | null;
	status: "read" | "reading" | "want";
};

const { book } = Astro.props as { book: Book };
---

<article class="flex items-start gap-4 py-3 border-b border-[#333]">
	<div class="flex-shrink-0 w-14 h-20">
		{book.cover_url ? (
			<img
				src={book.cover_url}
				alt={`Cover of ${book.title} by ${book.authors}`}
				width="56"
				height="80"
				style="width:56px;height:80px;object-fit:cover;"
				loading="lazy"
			/>
		) : (
			<div style="width:56px;height:80px;" class="bg-[#2a2a2a] rounded" />
		)}
	</div>
	<div class="flex flex-col gap-1">
		<span class="text-base">{book.title}</span>
		<span class="text-xs opacity-50">{book.authors}</span>
		{book.notes && (
			<span class="text-xs opacity-70 mt-1">{book.notes}</span>
		)}
	</div>
</article>