<script lang="ts">
	import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';

	export let feature: {
		kind: 'uwc' | 'ahb' | 'mcb' | 'cctv' | 'tmo' | 'foot';
	};

	export let activeElec: any;

	$: type = feature.kind.toLowerCase();
	$: isFoot = type === 'foot';
</script>

<svg viewBox="0 0 64 64" width="64" height="64">
	<BaseTrack {activeElec} height={64} />

	{#if type === 'foot'}
		<line
			x1="12"
			y1="32"
			x2="52"
			y2="32"
			stroke="#475569"
			stroke-width="2"
			stroke-dasharray="4 2"
		/>
	{:else if type === 'uwc'}
		<g stroke="#1e293b" stroke-width="3">
			<line x1="12" y1="26" x2="26" y2="26" />
			<line x1="38" y1="38" x2="52" y2="38" />
		</g>
		<text x="50" y="32" class="label-right">UWC</text>
	{:else}
		<rect x="18" y="22" width="28" height="20" rx="1" fill="#1e293b" />

		<circle cx="25" cy="29" r="3.5" fill="#ef4444" />
		<circle cx="39" cy="29" r="3.5" fill="#ef4444" />
		<circle cx="32" cy="37" r="3.5" fill="#ffcc00" />
		<text x="50" y="32" class="label-right">{type.toUpperCase()}</text>
	{/if}
</svg>

<style>
	svg {
		display: block;
		overflow: visible;
	}
	.label-right {
		text-anchor: start; /* Align to the left of the start point */
		dominant-baseline: central;
		font-family: sans-serif;
		font-weight: bold;
		font-size: 9px;
		fill: #1e293b;
	}
</style>
