<!--
Phase 10 stub for the battle-log active view. Phase 27 wires the real
battle viewer.
-->
<script lang="ts">
	import { i18n } from "$lib/i18n/index.svelte";

	type Props = { battleId: string };
	let { battleId }: Props = $props();
</script>

<section class="active-view" data-testid="active-view-battle" data-battle-id={battleId}>
	<h2>{i18n.t("game.view.battle")}</h2>
	<p>{i18n.t("game.shell.coming_soon")}</p>
</section>

<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>
