<script lang="ts" generics="T">
    import { cn } from "$lib/utils";

    type Item = {
        label: string;
        value: T;
    };

    let {
        label,
        items,
        value = $bindable(),
        type = "checkbox",
        class: className,
        ...rest
    }: {
        label?: string;
        items: Item[];
        value: any;
        type?: "checkbox" | "radio";
        class?: string;
    } = $props();
</script>

<div class={cn("flex flex-col gap-2", className)}>
    {#if label}
        <span class="scn-label">{label}</span>
    {/if}
    <div class="chip-group" {...rest}>
        {#each items as item}
            <label class="chip">
                {#if type === "checkbox"}
                    <input
                        type="checkbox"
                        bind:group={value}
                        value={item.value}
                    />
                {:else}
                    <input type="radio" bind:group={value} value={item.value} />
                {/if}
                <span>{item.label}</span>
            </label>
        {/each}
    </div>
</div>
