<!--
Active-view router for the per-entity tables. Phase 17 lights up
the ship-classes table; Phase 21 lights up the sciences table;
Phase 22 lights up the races table; the remaining slugs (planets,
ship-groups, fleets) keep the Phase 10 stub copy until their
respective phases land. The wrapper preserves
`data-testid="active-view-table"` and `data-entity={entity}` for
every branch (each leaf component mirrors them) so the navigation
e2e specs (`game-shell.spec.ts`, `view-menu`) keep matching.
-->
<script lang="ts">
	import { i18n, type TranslationKey } from "$lib/i18n/index.svelte";
	import TableShipClasses from "./table-ship-classes.svelte";
	import TableSciences from "./table-sciences.svelte";
	import TableRaces from "./table-races.svelte";

	type Props = { entity: string };
	let { entity }: Props = $props();

	function entityKey(slug: string): TranslationKey {
		const normalised = slug.replace(/-/g, "_");
		return `game.view.table.${normalised}` as TranslationKey;
	}
</script>

{#if entity === "ship-classes"}
	<TableShipClasses />
{:else if entity === "sciences"}
	<TableSciences />
{:else if entity === "races"}
	<TableRaces />
{:else}
	<section
		class="active-view"
		data-testid="active-view-table"
		data-entity={entity}
	>
		<h2>
			{i18n.t("game.view.table")}: {i18n.t(entityKey(entity))}
		</h2>
		<p>{i18n.t("game.shell.coming_soon")}</p>
	</section>
{/if}

<style>
	.active-view {
		padding: 1.5rem;
		font-family: system-ui, sans-serif;
	}
	.active-view h2 {
		margin: 0 0 0.5rem;
		font-size: 1.1rem;
	}
	.active-view p {
		margin: 0;
		color: #555;
	}
</style>
