<script lang="ts">
	import CardPattern from './svgs/CardPattern.svelte';
	import { getTheme, getPatternColor, PATTERN_OPACITY } from '$lib/utils/themes';

	let {
		themeName,
		color
	}: {
		themeName?: string;
		color?: string;
	} = $props();

	const theme = $derived(getTheme(themeName));
	const patternColor = $derived(getPatternColor(color));
</script>

{#if theme.pattern !== 'none'}
	<CardPattern pattern={theme.pattern} color={patternColor} opacity={PATTERN_OPACITY} />
{/if}
