<script lang="ts">
	import type { IconElement } from '../types';
	import { traceSvgPaths } from '../utils/trace-svg-paths';

	interface Props { element: IconElement; }
	let { element }: Props = $props();

	const svgMarkup = $derived(() => {
		const fill = element.fillMode === 'fill' || element.fillMode === 'both' ? element.color : 'none';
		const stroke = element.fillMode === 'stroke' || element.fillMode === 'both' ? element.color : 'none';
		return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="${fill}" stroke="${stroke}" stroke-width="${element.strokeWidth}" stroke-linecap="round" stroke-linejoin="round">${element.svgContent}</svg>`;
	});

	const animMode = $derived(element.animation?.mode ?? 'none');
	const animDur = $derived(element.animation?.duration ?? 800);
	const animLoop = $derived(element.animation?.loop ?? false);
	const animReverse = $derived(element.animation?.direction === 'reverse');
	const animKey = $derived(`${element.iconName}-${element.iconLibrary}-${animMode}-${animDur}-${animLoop}-${animReverse}`);
</script>

<div
	class="icon-element"
	use:traceSvgPaths={{
		enabled: animMode !== 'none',
		mode: animMode as 'none' | 'draw' | 'undraw' | 'draw-undraw' | 'flow',
		duration: animDur,
		loop: animLoop,
		reverse: animReverse,
		key: animKey
	}}
>{@html svgMarkup()}</div>

<style>
	.icon-element { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
	.icon-element :global(svg) { width: 100%; height: 100%; }
</style>
