<script lang="ts">
import { m } from '$lib/paraglide/messages.js';

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

<div
	data-testid="scope-card"
	data-variant={variant}
	class="mb-3 rounded-sm border p-4
		{variant === 'per-file'
		? 'border-accent bg-accent-bg'
		: 'border-line bg-surface'}"
>
	{#if variant === 'shared'}
		<div class="mb-3 flex items-center justify-between">
			<span class="text-xs font-bold tracking-widest text-ink-3 uppercase">
				{m.bulk_scope_shared_label({ count })}
			</span>
			<span
				class="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-accent px-1.5 text-xs font-bold text-primary"
			>
				{count}
			</span>
		</div>
	{:else}
		<p class="mb-3 text-xs font-bold tracking-widest text-primary uppercase">
			{m.bulk_scope_per_file_label()}
		</p>
	{/if}
	{@render children?.()}
</div>
