<script lang="ts">
	import { asset } from '$app/paths';

	let {
		pattern = 'none',
		color = '#000000',
		opacity = 0.1
	}: {
		pattern?: string;
		color?: string;
		opacity?: number;
	} = $props();

	const patternPath = $derived(asset(`/themes/${pattern}/item.svg`));
</script>

{#if pattern !== 'none'}
	<div
		class="absolute bottom-0 right-0 pointer-events-none overflow-hidden rounded-b-lg"
		style="
			mask-image: url({patternPath});
			-webkit-mask-image: url({patternPath});
			mask-size: cover;
			-webkit-mask-size: cover;
			mask-repeat: repeat;
			-webkit-mask-repeat: repeat;
			background-color: {color};
			opacity: {opacity};
			width: 200px;
			height: 200px;
		"
	/>
{/if}
