<script lang="ts">
	import { cn } from '../../helper/cls.js';
	import { getContext } from 'svelte';
	import type { HTMLAttributes } from 'svelte/elements';
	import type { TabContentProps } from '../../index.js';
	let { value = '', persisted = false, panelClass = '', children }: TabContentProps = $props();

	const getSelected = getContext('getSelected') as () => string;
	const selected = $derived(getSelected());
	const tabPanelClass = $derived(cn(panelClass));
	const active = $derived(selected === value);

	let divProps: HTMLAttributes<HTMLDivElement> = $derived({
		id: `panel-${value}`,
		role: 'tabpanel',
		class: tabPanelClass,
		'aria-labelledby': `tab-${value}`,
		tabindex: 0
	});
</script>

{#if persisted}
	<div {...divProps} style={active ? 'display: block' : 'display: none'}>
		{@render children?.(value)}
	</div>
{:else if active}
	<div {...divProps}>
		{@render children?.(value)}
	</div>
{/if}
