<script lang="ts">
	import type { BookMetadata } from "@src/types";
	import type { App } from "obsidian";

	interface Props {
		app: App;
		book: BookMetadata;
		size?: number;
	}

	const { app, book, size }: Props = $props();

	const coverPath = $derived(book.localCoverPath);
	const coverFile = $derived(app.vault.getFileByPath(coverPath));
	const coverSrc = $derived(
		coverFile ? app.vault.getResourcePath(coverFile) : "",
	);
	const coverAlt = $derived(book.title);
</script>

<img src={coverSrc} alt={coverAlt} width={size} />

<style lang="scss">
	img {
		border-radius: var(--radius-l);
	}
</style>
