<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import ThemeSwitch from './ThemeSwitch.svelte';

const { Story } = defineMeta({
    title: 'Features/ThemeSwitch',
    component: ThemeSwitch,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component:
                    'Theme toggle button that switches between light and dark modes. Uses ThemeManager to persist user preference and sync with system preference. Displays sun/moon icon based on current theme.',
            },
            story: { inline: false },
        },
    },
    argTypes: {
        // ThemeSwitch has no explicit props - it uses themeManager internally
    },
});
</script>

<script lang="ts">
import { themeManager } from '$features/ChangeAppTheme';

// Current theme state for display
const currentTheme = $derived(themeManager.value);
const themeSource = $derived(themeManager.source);
</script>

<Story name="Default">
    <div class="flex items-center justify-center p-8 gap-4">
        <ThemeSwitch />
        <div class="text-sm text-muted-foreground">
            Theme: <span class="font-semibold">{currentTheme}</span>
            {#if themeSource === 'user'}
                <span class="text-xs ml-2">(user preference)</span>
            {:else}
                <span class="text-xs ml-2">(system preference)</span>
            {/if}
        </div>
    </div>
</Story>
