<script lang="ts">
	import type { Snippet } from "svelte";
	import chroma from "chroma-js";
	import { Color } from "@utils/color";

	interface Props {
		children?: Snippet;
		color?: string;
		width?: number;
	}

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

	const backgroundColor = $derived(chroma(color));
	const borderLeftColor = $derived(chroma(color).mix("white", 0.04));
	const borderRightColor = $derived(chroma(color).mix("black", 0.04));
	const bandColor = $derived(chroma(color).mix("black", 0.14));
	const textColor = $derived(new Color(backgroundColor).contrastColor.hex);
</script>

<div
	class="bookshelf__book-wrapper"
	style:--book-color={backgroundColor.css()}
	style:--book-border-left-color={borderLeftColor.css()}
	style:--book-border-right-color={borderRightColor.css()}
	style:--book-band-color={bandColor.css()}
	style:--book-width={width + "px"}
	style:width={width + "px"}
	style:color={textColor}
>
	{@render children?.()}
</div>

<style lang="scss">
	div {
		background: var(--book-color);
		border-left: 2px solid var(--book-border-left-color);
		border-right: 2px solid var(--book-border-right-color);

		&:after {
			content: "";
			display: block;
			background: var(--book-band-color);
			height: 20px;
			width: calc(100% + 4px);

			position: absolute;
			top: 10px;
			left: -2px;
		}

		&:before {
			content: "";
			display: block;
			background: var(--book-band-color);
			height: 20px;
			width: calc(100% + 4px);

			position: absolute;
			bottom: 10px;
			left: -2px;
			z-index: 2;
		}

		:global(.bookshelf__book-content) {
			height: calc(var(--book-width));
			width: calc(200px - 60px) !important;
			margin: 30px var(--book-width);
		}
	}
</style>
