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

	interface Props {
		children?: Snippet;
		width?: number;
		design?: "default" | "colored-spine" | "dual-top-bands" | "split-bands";
		topMargin?: number;
	}

	let {
		children,
		width = 40,
		design = "default",
		topMargin,
	}: Props = $props();

	function getTopMargin(
		design: "default" | "colored-spine" | "dual-top-bands" | "split-bands",
	): number {
		switch (design) {
			case "split-bands":
				return 30;
			case "dual-top-bands":
				return 41;
		}
		return 0;
	}
</script>

<div
	class="bookshelf__book-wrapper bookshelf__book-tilted"
	style:--book-tilted-width={width + "px"}
	style:--book-tilted-top-margin={(topMargin ?? getTopMargin(design)) + "px"}
>
	{@render children?.()}
</div>

<style lang="scss">
	div {
		:global(.bookshelf__book-content) {
			height: calc(var(--book-tilted-width));
			width: calc(200px - 60px);
			margin: var(--book-tilted-top-margin) var(--book-tilted-width);
		}
	}
</style>
