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

	export let feature: {
		position: 'left' | 'right' | 'both';
		elecLoop?: string;
	};

	export let reversed: boolean = false;
	export let activeElec: any;

	$: loopColour = getElecColour(feature.elecLoop || activeElec);

	$: effectivePosition = (() => {
		if (!reversed || feature.position === 'both') return feature.position;
		return feature.position === 'left' ? 'right' : 'left';
	})();

	const leftPath = `M 32 0 Q 8 32 32 64`;
	const rightPath = `M 32 0 Q 56 32 32 64`;
</script>

<svg viewBox="0 0 64 64" width="64" height="64" class="loops">
	<g fill="none" stroke={loopColour} stroke-width="4" stroke-linecap="round">
		{#if effectivePosition === 'left' || feature.position === 'both'}
			<path d={leftPath} />
		{/if}

		{#if effectivePosition === 'right' || feature.position === 'both'}
			<path d={rightPath} />
		{/if}
	</g>

	<BaseTrack {activeElec} height={64} />
</svg>
