<script lang="ts">
  import settings, { type Settings } from '$stores/settings';

  interface Props {
    setting: keyof Settings;
    on?: string;
    off?: string;
    sectionBreak?: boolean;
    disabled?: boolean;
    children?: import('svelte').Snippet;
  }

  let {
    setting,
    on = '',
    off = '',
    sectionBreak = false,
    disabled = false,
    children
  }: Props = $props();
</script>

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

<br />

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