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

	interface Props {
		spark: number;
		region?: keyof typeof sparks;
	}

	const { spark, region = 'global' }: Props = $props();

	const cur = $derived(sparks[region].find((s) => s.spark_id === spark));
	const curClass = $derived.by(() => {
		if (cur == null) {
			return [];
		}
		switch (cur.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(cur?.rarity ?? 0));
</script>

{#if cur != 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>{cur.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>
