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

	export const card = tv({
		base: "rounded-sm",
		variants: {
			border: {
				true: "border border-border-default",
				false: ""
			},
			shadow: {
				true: "shadow-xs",
				false: ""
			},
			background: {
				true: "bg-background-default",
				false: ""
			},
			padding: {
				default: "px-6 py-4",
				sm: "p-4",
				none: ""
			}
		},
		defaultVariants: {
			border: true,
			shadow: false,
			background: true,
			padding: "default"
		}
	});

	export type CardVariants = VariantProps<typeof card>;
</script>

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

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

	let {
		border = true,
		shadow = false,
		background = true,
		padding = "default",
		class: className,
		children,
		...rest
	}: Props = $props();

	const classes = $derived(card({ border, shadow, background, padding, class: className }));
</script>

<div class={classes} {...rest}>
	{#if children}
		{@render children()}
	{/if}
</div>
