<script lang="ts">
	import { playAudio } from '$lib/stores';
	import { get } from 'svelte/store';
	import { IconOutline } from 'svelte-heros-v2';

	let settings = [
		{
			name: 'Sound abspielen',
			description:
				'Manche Elemente können Sounds abspielen. Aktiviere diese Option und finde raus welche',
			store: playAudio
		}
	];
</script>

<div>
	<h2 class="text-2xl">Einstellungen</h2>
	<div>
		<div class="divider" />
		<div class="grid grid-cols-2">
			{#each settings as setting}
				<div class="flex">
					<p>{setting.name}</p>
					<span class="tooltip ml-[0.2rem] -mt-[1px]" data-tip={setting.description}>
						<IconOutline name="question-mark-circle-outline" width="16" height="16" />
					</span>
				</div>
				<input
					type="checkbox"
					class="toggle justify-self-end mr-6"
					checked={get(setting.store)}
					on:change={(e) => {
						// eslint-disable-next-line @typescript-eslint/ban-ts-comment
						// @ts-ignore
						setting.store.set(e.target.checked);
					}}
				/>
			{/each}
		</div>
		<div class="divider" />
	</div>
</div>
