<script lang="ts">
import { track } from "$lib/analytics";
import Spacer from "$lib/Layout/Spacer.svelte";
import settings, { type Settings } from "$stores/settings";

export let setting: keyof Settings;
export let on = "";
export let off = "";
export let sectionBreak = false;
export let disabled = false;

const toggle = () => {
	if (disabled) return;

	const value = !$settings[setting];

	settings.setKey(setting, value);
	track("Toggle Setting", { key: setting, value });
};
</script>

<a href={'#'} onclick={toggle}>
  {#if disabled}
    <strike>
      {$settings[setting] ? on : off}
      <slot />
    </strike>
  {:else}
    {$settings[setting] ? on : off}
    <slot />
  {/if}
</a>

<br />

{#if sectionBreak}
  <Spacer />
{/if}
