<script lang="ts">
	import type { Snippet } from "svelte";
	import chroma from "chroma-js";

	interface Props {
		children?: Snippet;
		color?: string;
		onClick?: () => void;
	}

	let { children, color = "green", onClick }: Props = $props();

	let backgroundColor = $derived(chroma(color));
	let bandColor = $derived(chroma(color).mix("black", 0.14));
</script>

<div
	class="bookshelf__book-wrapper bookshelf__book-onDisplay"
	style:--book-color={backgroundColor.css()}
	style:--book-band-color={bandColor.css()}
	onclick={onClick}
	onkeydown={(ev) => ev.key === "Enter" && onClick?.()}
	role="link"
	tabindex="0"
>
	<div class="book-display-crease"></div>
	{@render children?.()}
</div>

<style lang="scss">
	$band-width: 5px;
	$band-offset: 8px;

	div.bookshelf__book-onDisplay {
		width: 150px;
		height: 200px;
		background: var(--book-color);
		display: flex;
		flex-flow: column wrap;
		justify-content: space-between;
		align-items: center;
		text-align: center;
		margin: 20px 2px 10px 2px;
		position: relative;

		padding-left: calc($band-offset + $band-width);
		padding-right: 8px;

		&:before {
			content: " ";
			display: block;
			background: var(--book-band-color);
			width: $band-width;
			height: 100%;
			position: absolute;
			top: 0;
			left: $band-offset;
		}

		&:global(.bookshelf__book-author) {
			font-size: 0.8em;
			margin-left: 13px;
		}
	}
</style>
