<!--
    Component: ThemeSwitch
    Toggles the theme between light and dark mode.
-->
<script lang="ts">
import type { ResponsiveManager } from '$shared/lib';
import { IconButton } from '$shared/ui';
import MoonIcon from '@lucide/svelte/icons/moon';
import SunIcon from '@lucide/svelte/icons/sun';
import { getContext } from 'svelte';
import { themeManager } from '../../model';

const responsive = getContext<ResponsiveManager>('responsive');

const theme = $derived(themeManager.value);
</script>

<IconButton onclick={() => themeManager.toggle()} size={responsive.isMobile ? 'sm' : 'md'} title="Toggle theme">
    {#snippet icon()}
        {#if theme === 'light'}
            <MoonIcon />
        {:else}
            <SunIcon />
        {/if}
    {/snippet}
</IconButton>
