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

	interface Props {
		id: string;
		title: string;
		initial?: boolean;
		children: Snippet;
	}

	let { id, title, initial = false, children }: Props = $props();

	const context = getTabContext();

	context.tabs = { ...context.tabs, [id]: { title } };
	if (initial) {
		context.current = id;
	}
</script>

{#if context.current === id}
	<div class="h-full overflow-auto py-2 pe-3 ps-1" in:fade={fadeDefault}>
		{@render children?.()}
	</div>
{/if}