<script generics="KeyType extends number | string, ValueType" lang="ts">
  import type { Snippet } from "svelte";

  interface Props {
    children?: Snippet<[KeyType, ValueType]>;
    options: Array<[KeyType, ValueType]>;
    selected: Array<KeyType>;
  }

  let { children, options, selected = $bindable() }: Props = $props();

  selected;
</script>

{#each options as [id, value] (id)}
  <label>
    <input type="checkbox" value={id} bind:group={selected} />
    <span></span>
    {@render children?.(id, value)}
  </label>
{/each}