<script lang="ts">
	import { Checkbox } from 'bits-ui';
	import Icon from './Icon.svelte';

	let {
		checked = $bindable(false),
		disabled = false,
		class: className = '',
		onchange,
	}: {
		checked?: boolean;
		disabled?: boolean;
		class?: string;
		onchange?: (checked: boolean) => void;
	} = $props();
</script>

<Checkbox.Root
	class="saas-checkbox {className}"
	{disabled}
	{checked}
	onCheckedChange={(next) => {
		checked = next;
		onchange?.(next);
	}}
>
	{#snippet children({ checked: isChecked })}
		{#if isChecked}
			<Icon name="check" class="h-3.5 w-3.5" />
		{/if}
	{/snippet}
</Checkbox.Root>
