<!--
Three-button tab switcher for the sidebar. Each button is labelled
and tagged so component tests can target it; the parent sidebar
component owns the selected-tab state and re-renders the matching
tool panel.

Phase 12 introduces the `hideOrder` prop: when true the Order entry
is filtered out of the tab list. The current consumer is the
`historyMode` flag forwarded from the in-game shell layout — the
flag is constant `false` in Phase 12 and Phase 26's history mode
flips it on.
-->
<script lang="ts">
	import { i18n, type TranslationKey } from "$lib/i18n/index.svelte";
	import type { SidebarTab } from "./types";

	type Props = {
		activeTab: SidebarTab;
		onSelect: (tab: SidebarTab) => void;
		hideOrder?: boolean;
	};
	let { activeTab, onSelect, hideOrder = false }: Props = $props();

	const allTabs: ReadonlyArray<{ id: SidebarTab; key: TranslationKey }> = [
		{ id: "calculator", key: "game.sidebar.tab.calculator" },
		{ id: "inspector", key: "game.sidebar.tab.inspector" },
		{ id: "order", key: "game.sidebar.tab.order" },
	];
	const tabs = $derived(
		hideOrder ? allTabs.filter((t) => t.id !== "order") : allTabs,
	);
</script>

<div class="tab-bar" role="tablist" data-testid="sidebar-tab-bar">
	{#each tabs as tab (tab.id)}
		<button
			type="button"
			role="tab"
			data-testid="sidebar-tab-{tab.id}"
			aria-selected={tab.id === activeTab}
			class:active={tab.id === activeTab}
			onclick={() => onSelect(tab.id)}
		>
			{i18n.t(tab.key)}
		</button>
	{/each}
</div>

<style>
	.tab-bar {
		display: flex;
		gap: 0.25rem;
		padding: 0.5rem 0.5rem 0;
		border-bottom: 1px solid #20253a;
		font-family: system-ui, sans-serif;
	}
	.tab-bar button {
		font: inherit;
		font-size: 0.9rem;
		padding: 0.4rem 0.75rem;
		background: transparent;
		color: #aab;
		border: 0;
		border-bottom: 2px solid transparent;
		cursor: pointer;
	}
	.tab-bar button.active {
		color: #e8eaf6;
		border-bottom-color: #6d8cff;
	}
	.tab-bar button:hover:not(.active) {
		color: #e8eaf6;
	}
</style>
