<script lang="ts">
	import type { Component } from 'svelte';
	import {
		Tent,
		Trees,
		Image,
		AudioLines,
		MessageSquare,
		Code,
		Server,
		Compass,
		Footprints,
		Mountain,
		Flag,
		CirclePlay,
		ArrowLeftRight,
		Star,
		Check,
		ArrowRight,
		MapPin,
		Link,
		FileText,
		BookOpen,
		Mail,
		Zap,
		Box,
		LayoutGrid,
		Clock,
		Globe,
		Smile,
		X,
		GitBranch,
		Plus,
		Menu,
		Unplug,
		Target,
		Palette,
		Cpu,
		Share2,
		NotebookPen,
		TriangleAlert
	} from '@lucide/svelte';

	interface Props {
		name: string;
		size?: number;
		stroke?: string;
		sw?: number;
		class?: string;
		rotate?: number;
	}
	let { name, size = 24, stroke = 'currentColor', sw = 1.6, class: cls = '', rotate }: Props = $props();

	const MAP: Record<string, Component> = {
		shed: Tent,
		trees: Trees,
		image: Image,
		wave: AudioLines,
		chat: MessageSquare,
		code: Code,
		server: Server,
		compass: Compass,
		boot: Footprints,
		mountain: Mountain,
		flag: Flag,
		play: CirclePlay,
		swap: ArrowLeftRight,
		star: Star,
		check: Check,
		arrow: ArrowRight,
		pin: MapPin,
		link: Link,
		doc: FileText,
		book: BookOpen,
		mail: Mail,
		bolt: Zap,
		cube: Box,
		grid: LayoutGrid,
		clock: Clock,
		plus: Plus,
		menu: Menu,
		close: X,
		unplug: Unplug,
		target: Target,
		palette: Palette,
		cpu: Cpu,
		share: Share2,
		notebook: NotebookPen,
		alert: TriangleAlert,
		// social / external — neutral generic marks (no brand logos)
		globe: Globe,
		hug: Smile,
		xsocial: X,
		github: GitBranch
	};

	const Cmp = $derived(MAP[name] ?? Star);
	const style = $derived(rotate !== undefined ? `transform: rotate(${rotate}deg)` : undefined);
</script>

<Cmp {size} color={stroke} strokeWidth={sw} class={cls} {style} aria-hidden="true" />
