<script lang="ts">
	import * as icons from 'lucide-svelte';

	interface Props {
		name: string | null;
		size?: number;
		class?: string;
	}

	let { name, size = 16, class: className = '' }: Props = $props();

	// Convert kebab-case to PascalCase: "layout-dashboard" → "LayoutDashboard"
	function toPascalCase(str: string): string {
		return str
			.split('-')
			.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
			.join('');
	}

	const iconComponent = $derived(
		name ? ((icons as Record<string, unknown>)[toPascalCase(name)] as typeof import('svelte').SvelteComponent | undefined) ?? null : null
	);
</script>

{#if iconComponent}
	{@const Icon = iconComponent}
	<Icon {size} class={className} />
{/if}
