<!--
  Task 6: Toggle switch to replace checkboxes.
-->
<script lang="ts">
	interface Props {
		checked?: boolean;
		label?: string;
		disabled?: boolean;
		onchange?: (checked: boolean) => void;
	}

	let {
		checked = $bindable(false),
		label = '',
		disabled = false,
		onchange
	}: Props = $props();

	function toggle() {
		if (disabled) return;
		checked = !checked;
		onchange?.(checked);
	}
</script>

<button
	type="button"
	role="switch"
	aria-checked={checked}
	class="toggle-switch {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
	onclick={toggle}
	{disabled}
>
	<span class="sr-only">{label}</span>
</button>
