<script lang="ts">
	import { type Spark } from '$lib/data/spark';

	interface Props {
		spark: Spark | null | undefined;
	}

	const { spark }: Props = $props();

	const curClass = $derived.by(() => {
		if (spark == null) {
			return [];
		}
		switch (spark.type) {
			case 1:
				return ['stat'];
			case 2:
				return ['aptitude'];
			case 3:
				return ['unique'];
			case 5:
			case 4:
			case 6:
			case 10:
			case 8:
			case 11:
			case 9:
				return ['white-spark'];
			default:
				return [];
		}
	});
	const stars = $derived('★'.repeat(spark?.rarity ?? 0));
</script>

{#if spark != null}
	<div
		class={[
			curClass,
			'spark mx-1 flex items-center rounded-xl px-2 py-1 transition ease-in hover:shadow-md hover:ease-out motion-safe:duration-75 motion-safe:hover:-translate-y-0.5 dark:shadow-neutral-950',
		]}
	>
		<span>{spark.name}</span>
		<span class="ml-2 text-xl text-amber-800 text-shadow-md dark:text-amber-300">{stars}</span>
	</div>
{/if}

<style>
	.white-spark {
		--spark-color: light-dark(var(--color-mist-300), var(--color-mist-600));
	}

	.stat {
		--spark-color: light-dark(var(--color-sky-300), var(--color-sky-600));
	}

	.aptitude {
		--spark-color: light-dark(var(--color-rose-300), var(--color-rose-700));
	}

	.unique {
		--spark-color: light-dark(var(--color-lime-400), var(--color-lime-700));
	}

	.spark {
		background-color: var(--spark-color);
	}
</style>
