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

	export const layerCard = tv({
		base: "flex flex-col gap-[calc(var(--layer-gap)+2px)] rounded-[calc(var(--radius-md)+var(--layer-gap)+1px)] bg-background-subtle p-[calc(var(--layer-gap)+1px)] edge-ring ring-border-default [--layer-gap:3px] dark:bg-background-canvas"
	});
</script>

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

	interface Props extends Omit<HTMLAttributes<HTMLElement>, "class" | "children"> {
		as?: string;
		class?: string;
		children?: Snippet;
	}

	let { as = "div", class: className, children, ...rest }: Props = $props();
</script>

<svelte:element this={as} class={layerCard({ class: className })} {...rest}>
	{@render children?.()}
</svelte:element>