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

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

	const theme = $derived(getTheme(themeName));
	const patternColor = $derived.by(() => {
		const isDark = themeStore.getResolvedTheme() === 'dark';
		return isDark ? '#FFFFFF' : '#000000';
	});
</script>

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