<template>
	<label class="ss-toggle-row">
		<span class="ss-toggle-text">
			<span class="ss-toggle-label">{{ label }}</span>
			<span v-if="description" class="ss-toggle-desc">{{ description }}</span>
		</span>
		<span class="ss-toggle-control">
			<input
				type="checkbox"
				class="ss-toggle-input"
				:checked="modelValue"
				@change="$emit('update:modelValue', $event.target.checked)"
			/>
			<span class="ss-toggle-track" aria-hidden="true">
				<span class="ss-toggle-thumb"></span>
			</span>
		</span>
	</label>
</template>

<script setup>
	defineProps({
		modelValue: { type: Boolean, required: true },
		label: { type: String, required: true },
		description: { type: String, default: '' },
	});

	defineEmits( [ 'update:modelValue' ] );
</script>
