<script lang="ts">
	import { Color, isColorName, type ColorName } from "@utils/color";
	import BookText from "./BookText.svelte";
	import BookStackColoredSpine from "./designs/stack/BookStackColoredSpine.svelte";
	import BookStackDefault from "./designs/stack/BookStackDefault.svelte";
	import BookStackDualTopBands from "./designs/stack/BookStackDualTopBands.svelte";
	import BookStackSplitBands from "./designs/stack/BookStackSplitBands.svelte";

	interface Props {
		title?: string;
		subtitle?: string;
		color?: ColorName | string;
		design?: "default" | "split-bands" | "dual-top-bands" | "colored-spine";
	}

	let {
		title,
		subtitle,
		color: colorRaw = "green",
		design,
	}: Props = $props();

	const color = $derived(
		isColorName(colorRaw)
			? Color.fromName(colorRaw).darken()
			: Color.fromCSSColor(colorRaw),
	);
	const textColor = $derived(color.contrastColor.hex);
</script>

<li class="bookshelf__bookstack-elem">
	{#if design === "split-bands"}
		<BookStackSplitBands color={color.hex} {textColor}>
			<BookText {title} {subtitle} />
		</BookStackSplitBands>
	{:else if design === "dual-top-bands"}
		<BookStackDualTopBands color={color.hex} {textColor}>
			<BookText {title} {subtitle} />
		</BookStackDualTopBands>
	{:else if design === "colored-spine"}
		<BookStackColoredSpine color={color.hex} {textColor}>
			<BookText {title} {subtitle} />
		</BookStackColoredSpine>
	{:else}
		<BookStackDefault color={color.hex} {textColor}>
			<BookText {title} {subtitle} />
		</BookStackDefault>
	{/if}
</li>
