<script lang="ts" module>
	import { cn, type WithElementRef } from "$lib/utils.js";
	import type { HTMLAttributes } from "svelte/elements";
	import { type VariantProps, tv } from "tailwind-variants";

	export const cardVariants = tv({
		base: "bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col",
		variants: {
			variant: {
				default: "bg-card text-card-foreground",
				glass: "bg-glass-background border-glass-border border ring-0 backdrop-blur-xl shadow-2xl",
			},
			size: {
				default: "gap-4 py-4 data-[size=sm]:gap-3 data-[size=sm]:py-3",
				sm: "gap-3 py-3",
			},
		},
		defaultVariants: {
			variant: "default",
			size: "default",
		},
	});

	export type CardVariant = VariantProps<typeof cardVariants>["variant"];
	export type CardSize = VariantProps<typeof cardVariants>["size"];

	export type CardProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
		variant?: CardVariant;
		size?: CardSize;
	};
</script>

<script lang="ts">
	let {
		ref = $bindable(null),
		class: className,
		children,
		variant = "default",
		size = "default",
		...restProps
	}: CardProps = $props();
</script>

<div
	bind:this={ref}
	data-slot="card"
	data-size={size}
	class={cn(cardVariants({ variant, size }), className)}
	{...restProps}
>
	{@render children?.()}
</div>
