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

	export const card = tv({
		base: "overflow-clip",
		variants: {
			rounded: {
				true: "rounded-md",
				false: ""
			},
			border: {
				true: "edge-ring ring-border-default",
				false: ""
			},
			background: {
				true: "bg-background-default",
				false: ""
			},
			padding: {
				regular: "p-sm",
				small: "p-xs",
				none: ""
			}
		},
		defaultVariants: {
			rounded: true,
			border: true,
			background: true,
			padding: "regular"
		}
	});

	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"> {
		rounded?: CardVariants["rounded"];
		border?: CardVariants["border"];
		background?: CardVariants["background"];
		padding?: CardVariants["padding"];
		class?: string;
		children?: Snippet;
	}

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

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

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