<script lang="ts">
let {
	variant,
	count = 0,
	children
}: {
	variant: 'per-file' | 'shared';
	count?: number;
	children?: import('svelte').Snippet;
} = $props();
</script>

<div
	data-testid="scope-card"
	class="rounded-sm border p-4
		{variant === 'per-file'
		? 'border-brand-mint bg-brand-mint/10'
		: 'border-brand-sand bg-white'}"
>
	{#if variant === 'shared'}
		<div class="mb-3 flex items-center justify-between">
			<span class="text-xs font-bold tracking-widest text-gray-400 uppercase">
				Gilt für alle Dateien
			</span>
			<span
				class="bg-brand-sand inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-bold text-brand-navy"
			>
				{count}
			</span>
		</div>
	{:else}
		<p class="mb-3 text-xs font-bold tracking-widest text-brand-mint uppercase">Diese Datei</p>
	{/if}
	{@render children?.()}
</div>
