<script lang="ts">
let {
	groups,
	selectedGroupIds = []
}: {
	groups: { id: string; name: string }[];
	selectedGroupIds?: string[];
} = $props();

let selected = $derived([...selectedGroupIds]);
</script>

<div class="flex flex-wrap gap-3">
	{#each groups as group (group.id)}
		<label class="inline-flex 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}
</div>
