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

	export let feature: {
		from: string;
		to: string;
	};

	export let reversed: boolean = false;

	export let activeElec: any;

	$: effectiveFeature = {
		from: reversed ? feature.to : feature.from,
		to: reversed ? feature.from : feature.to
	};
</script>

<svg viewBox="0 0 64 64" width="64" height="64" style="overflow: visible;">
	<BaseTrack {activeElec} height={64} />

	<line
		x1="-500"
		y1="32"
		x2="800"
		y2="32"
		stroke="#6366f1"
		stroke-width="2"
		stroke-dasharray="8 4"
	/>

	<g font-family="sans-serif" font-weight="800" font-size="11">
		<text x="70" y="24" fill="#4338ca" style="text-transform: uppercase;">
			{effectiveFeature.from}
		</text>
		<text x="70" y="46" fill="#4338ca" style="text-transform: uppercase;">
			{effectiveFeature.to}
		</text>
	</g>
</svg>
