<script module lang="ts">
	import { tv } from "tailwind-variants";

	// the surface that docks directly beneath a <Tabs> bar. it pulls itself up 1px
	// so its top border tucks behind the bar, where the active tab's raised, opaque
	// background hides the seam — producing the connected "folder tab" look. keep it
	// flush against the tab bar (no margin between them) for the join to line up.
	export const tabPanel = tv({
		base: "-mt-px rounded border border-border-default bg-background-default text-foreground-default",
		variants: {
			// the common surface padding; turn off to lay out children yourself
			padded: {
				true: "px-6 py-4",
				false: ""
			}
		},
		defaultVariants: {
			padded: true
		}
	});
</script>

<script lang="ts">
	import type { Snippet } from "svelte";

	interface Props {
		// tag to render as; a semantic <section> by default
		as?: string;
		padded?: boolean;
		class?: string;
		children: Snippet;
	}

	let { as = "section", padded = true, class: className, children }: Props = $props();
</script>

<svelte:element this={as} class={tabPanel({ padded, class: className })}>
	{@render children()}
</svelte:element>
