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

	export const tabPanel = tv({
		base: "rounded-sm 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>
