<!--
In-game ephemeral light/dark theme toggle. Replaces the previous account
menu in the top-right of the game shell. The persisted theme choice
(system/light/dark) lives in the lobby's profile screen; this toggle
only flips an in-memory `override` on the shared `theme` store, so the
game shell can be re-themed without touching the user's persisted
preference. The override is cleared on shell unmount (see
`game-shell.svelte`), so leaving and re-entering the game re-projects
the persisted choice.
-->
<script lang="ts">
	import { i18n } from "$lib/i18n/index.svelte";
	import { theme } from "$lib/theme/theme.svelte";

	const next = $derived(theme.resolved === "light" ? "dark" : "light");
	const label = $derived(
		i18n.t(
			next === "light"
				? "game.shell.theme_toggle.to_light"
				: "game.shell.theme_toggle.to_dark",
		),
	);

	function toggle(): void {
		theme.setOverride(next);
	}
</script>

<button
	type="button"
	class="theme-toggle"
	data-testid="game-mode-theme-toggle"
	data-theme={theme.resolved}
	aria-label={label}
	aria-pressed={theme.resolved === "dark"}
	onclick={toggle}
>
	<span aria-hidden="true">{theme.resolved === "light" ? "☼" : "☾"}</span>
</button>

<style>
	.theme-toggle {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font: inherit;
		font-size: 1.1rem;
		padding: 0.25rem 0.6rem;
		background: transparent;
		color: inherit;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-sm);
		cursor: pointer;
	}
	.theme-toggle:hover {
		background: var(--color-surface-hover);
	}
</style>
