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

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

	let { children, color = "green", onClick }: 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 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:color={textColor}
	onclick={onClick}
	onkeydown={(ev) => ev.key === "Enter" && onClick?.()}
	role="link"
	tabindex="0"
>
	{@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);
	}
</style>
