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

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

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

{#if theme.pattern !== 'none'}
	{#if showTop}
		<TopPattern pattern={theme.pattern} color={patternColor} opacity={PATTERN_OPACITY} />
	{/if}
	{#if showBottom}
		<BottomPattern pattern={theme.pattern} color={patternColor} opacity={PATTERN_OPACITY} />
	{/if}
{/if}
