<script lang="ts">
	interface Props {
		toc: string;
	}

	let { toc }: Props = $props();

	let code = $derived(toc.toUpperCase());
</script>

<!-- SPACE MONO for the font? -->
<div class="toc-container {code}">
	{code}
</div>

<style>
	.toc-container {
		border-radius: 10px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 2px 8px;
		font-weight: 800;
		font-size: 1.1rem;
		background-color: #333;
		color: #fff;
		font-family: 'Courier New', Courier, monospace;
	}

	.AW {
		/* Transport for Wales */
		background: red;
		color: white;
	}

	.LM {
		/* West Midlands Trains */
		background: rgb(176, 115, 1);
		color: white;
	}

	.GW {
		/* Great Western Railway */
		background: #004225;
		color: #e2e2e2;
	}

	.GR {
		/* LNER */
		background-color: #c00000;
		color: #ffffff;
	}

	.VT {
		/* Avanti West Coast */
		background-color: #004354;
		color: #ffffff;
	}

	.GN {
		/* Great Northern */
		background-color: fuchsia;
		color: rgb(229, 229, 229);
	}

	.SW {
		/* South Western Railway */
		background-color: #2a3389;
		color: #ffffff;
	}

	.XC {
		/* CrossCountry */
		background-color: #660000;
		color: #e4d5b1;
	}
</style>
