<script lang="ts">
  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;
</script>

<a
  href={'#'}
  on:click={() =>
    disabled
      ? {}
      : $settings[setting]
        ? settings.setKey(setting, false)
        : settings.setKey(setting, true)}
>
  {#if disabled}
    <strike>
      {$settings[setting] ? on : off}
      <slot />
    </strike>
  {:else}
    {$settings[setting] ? on : off}
    <slot />
  {/if}
</a>

<br />

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