<script lang="ts">
	import { getElecColour } from '$lib/railStyles';
	import type { ElecType } from '$lib/railStyles';

	export let feature: {
		from: {
			elec: ElecType;
			eco?: string;
		};
		to: {
			elec: ElecType;
			eco?: string;
		};
	};

	$: fromColour = getElecColour(feature.from.elec);
	$: toColour = getElecColour(feature.to.elec);
	$: showFromEco = !!feature.from.eco;
	$: showToEco = !!feature.to.eco;
</script>

<svg viewBox="0 0 64 64" width="64" height="64" style="overflow: visible;">
	<line x1="32" y1="0" x2="32" y2="32" stroke={fromColour} stroke-width="6" />
	<line x1="32" y1="32" x2="32" y2="64" stroke={toColour} stroke-width="6" />

	{#if showFromEco || showToEco}
		<line
			x1="32"
			y1="32"
			x2="800"
			y2="32"
			stroke="#ef4444"
			stroke-width="2"
			stroke-dasharray="6 3"
		/>

		<g font-family="sans-serif" font-size="10" font-weight="800" text-anchor="start">
			{#if showFromEco}
				<text x="75" y="24" fill="#b91c1c" style="text-transform: uppercase;">
					ECO: {feature.from.eco} | Type: {feature.from.elec}
				</text>
			{/if}

			{#if showToEco}
				<text x="75" y="48" fill="#b91c1c" style="text-transform: uppercase;">
					ECO: {feature.to.eco} | Type: {feature.to.elec}
				</text>
			{/if}
		</g>
	{/if}

	<rect x="24" y="30" width="16" height="4" fill="white" stroke="#b91c1c" stroke-width="1.5" />
</svg>

<style>
	svg {
		display: block;
		overflow: visible;
	}
</style>
