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

	export const layerCardPrimary = tv({
		base: "relative min-w-0 overflow-clip rounded-md bg-background-default edge-ring ring-border-default",
		variants: {
			padding: {
				regular: "p-md",
				small: "p-sm",
				none: ""
			}
		},
		defaultVariants: {
			padding: "regular"
		}
	});

	export type LayerCardPrimaryVariants = VariantProps<typeof layerCardPrimary>;
</script>

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

	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class" | "children"> {
		padding?: LayerCardPrimaryVariants["padding"];
		class?: string;
		children?: Snippet;
	}

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

<div class={layerCardPrimary({ padding, class: className })} {...rest}>
	{@render children?.()}
</div>