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

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

	const theme = $derived(getTheme(themeName));
	const themeColor = $derived(getThemeColor(color));
</script>

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