<script lang="ts">
	import Card, { type CardVariants } from "#lib/components/ui/Card.svelte";
	import type { Component, Snippet } from "svelte";
	import type { SvelteHTMLElements } from "svelte/elements";

	interface Props {
		message: string;
		messageDirection?: "horizontal" | "vertical";
		icon?: Component<SvelteHTMLElements["svg"]>;
		border?: CardVariants["border"];
		background?: CardVariants["background"];
		size?: "default" | "inline";
		class?: string;
		children?: Snippet;
	}

	let {
		message,
		messageDirection = "horizontal",
		icon,
		border = true,
		background = true,
		size = "default",
		class: className,
		children
	}: Props = $props();

	const Icon = $derived(icon);
</script>

{#if size === "inline"}
	<p
		data-testid="emptyState"
		class={[
			"flex items-center gap-xs typography-paragraph-regular text-foreground-muted",
			className
		]}
	>
		{message}{@render children?.()}
	</p>
{:else}
	<Card
		data-testid="emptyState"
		{border}
		{background}
		padding="none"
		class={[
			"flex flex-col items-center justify-center gap-xl p-4xl typography-paragraph-large text-foreground-subtle",
			className
		].join(" ")}
	>
		{#if Icon}
			<Icon class="size-16 text-foreground-disabled" aria-hidden="true" />
		{/if}
		<span class="flex items-center gap-sm {messageDirection === 'vertical' && 'flex-col'}"
			>{message}{@render children?.()}</span
		>
	</Card>
{/if}