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

	export const hiddenContent = tv({
		base: "flex flex-wrap items-center gap-x-xs gap-y-2xs text-foreground-muted not-italic",
		variants: {
			size: {
				small: "typography-paragraph-small",
				regular: "typography-paragraph-regular"
			}
		},
		defaultVariants: {
			size: "small"
		}
	});

	export type HiddenContentSize = NonNullable<VariantProps<typeof hiddenContent>["size"]>;
</script>

<script lang="ts">
	import TriangleAlert from "$icon/triangle-alert";
	import Button from "#lib/components/ui/Button.svelte";
	import Card from "#lib/components/ui/Card.svelte";

	interface Props {
		message: string;
		action?: { label: string; onclick: () => void };
		size?: HiddenContentSize;
		icon?: boolean;
		class?: string;
	}

	let { message, action, size = "small", icon = true, class: className }: Props = $props();
</script>

<Card
	border={false}
	background={false}
	rounded={false}
	padding="none"
	class={hiddenContent({ size, class: className })}
>
	<span class="flex min-w-0 flex-[1_1_12rem] items-center gap-xs">
		{#if icon}
			<TriangleAlert class="size-4 shrink-0" aria-hidden="true" />
		{/if}
		<span class="min-w-0">{message}</span>
	</span>
	{#if action}
		<Button size="small" onclick={action.onclick}>{action.label}</Button>
	{/if}
</Card>