<script lang="ts">
	import { getTabContext } from '$lib/Tabs';
	import { fadeFast } from '$lib/Transitions';
	import { fade } from 'svelte/transition';

	const context = getTabContext();
</script>

<div class="flex h-full max-h-full flex-col">
	<nav>
		<ul class="me-3 flex border-b-2 border-slate-700 text-sm">
			{#each Object.entries($context.tabs) as [id, { title, badge }]}
				<li class="-mb-0.5">
					<button
						type="button"
						class:active={$context.current === id}
						class="relative flex gap-1 p-1 px-3 hover:border-b-2 hover:border-slate-200"
						on:click={() => ($context.current = id)}
					>
						{#if badge}
							<div
								class="absolute right-0 top-1 h-2 w-2 rounded-full bg-emerald-400"
								title="There are pending changes"
								transition:fade={fadeFast}
							/>
						{/if}
						<span>{title}</span>
					</button>
				</li>
			{/each}
		</ul>
	</nav>
	<slot />
</div>

<style lang="postcss">
	button.active {
		@apply border-b-2 border-indigo-500;
	}
</style>