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

let {
	groups,
	selectedGroupIds = []
}: {
	groups: { id: string; name: string }[];
	selectedGroupIds?: string[];
} = $props();

let selected = $state<string[]>(untrack(() => [...selectedGroupIds]));
</script>

<fieldset class="flex flex-wrap gap-3 border-none p-0">
	<legend class="sr-only">{m.admin_new_invite_groups()}</legend>
	{#each groups as group (group.id)}
		<label class="inline-flex min-h-[44px] items-center gap-2 text-sm text-ink-2">
			<input
				type="checkbox"
				name="groupIds"
				value={group.id}
				bind:group={selected}
				class="rounded border-line text-ink focus:ring-focus-ring"
			/>
			{group.name}
		</label>
	{/each}
</fieldset>
