<script>
	import { LightSwitch } from '@skeletonlabs/skeleton';
	
	function resetOnboarding() {
		localStorage.setItem('onboarding', true);
	}

	import { getModalStore } from '@skeletonlabs/skeleton';
	const modalStore = getModalStore();

	function resetModal() {
		const modal = {
			type: 'confirm',
			// Data
			title: 'Reset Confirmation',
			body: 'Are you sure you want to reset the app?',
			response: (boolean) => console.log('reset:', boolean),
		};
		modalStore.trigger(modal);
	}
</script>

<h1>Settings</h1>
<div class="flex flex-col gap-4">
	<div class="flex gap-2">
		<p>Dark Mode</p>
		<LightSwitch />
	</div>

	<button type="button" class="btn variant-filled-surface w-full" on:click={resetOnboarding}>Restart Onboarding</button>
	
	<button type="button" class="btn variant-ghost-error w-full" on:click={resetModal}>Reset</button>
</div>