<script lang="ts">
  import { themeStore } from '$lib/stores/theme.svelte';
  import { Sun, Moon, Monitor } from '@lucide/svelte';
  import IconButton from '../IconButton.svelte';

  let {
    color = $bindable(null),
    size = 'sm'
  }: {
    color: string | null;
    size?: 'sm' | 'md' | 'lg';
  } = $props();

  function toggle() {
    themeStore.toggle();
  }
</script>

<IconButton onclick={toggle} {size} {color} rounded="md">
  {#if themeStore.current === 'light'}
    <Sun size={20} />
    <span class="sr-only">Light mode (click for dark)</span>
  {:else if themeStore.current === 'dark'}
    <Moon size={20} />
    <span class="sr-only">Dark mode (click for system)</span>
  {:else}
    <Monitor size={20} />
    <span class="sr-only">System mode (click for light)</span>
  {/if}
</IconButton>
