<script lang="ts">
	import { createEventDispatcher } from 'svelte';
	export let initialValue: boolean = false;

	let enabled: boolean = initialValue;
	const dispatch = createEventDispatcher();

	const toggleSwitch = (): void => {
		enabled = !enabled;
		dispatch('toggle', enabled);
	};
</script>

<button
	type="button"
	class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-900 focus:ring-offset-2"
	class:bg-purple-900={enabled}
	class:bg-gray-200={!enabled}
	role="switch"
	aria-checked={enabled}
	on:click={toggleSwitch}
>
	<span
		aria-hidden="true"
		class="pointer-events-none inline-block rounded-full h-5 w-5 transform bg-white shadow ring-0 transition duration-200 ease-in-out"
		class:translate-x-5={enabled}
		class:translate-x-0={!enabled}
	></span>
</button>
