@page "/components/theme-toggle"

<PageTitle>Theme Toggle — Lumeo</PageTitle>

<PageHeader Title="Theme Toggle" Description="A simple button to toggle between light and dark mode." />

<div class="mt-10 space-y-3">
    <Heading Id="when-to-use" Level="2" Class="scroll-mt-20">When to Use</Heading>
    <ul class="list-disc list-inside space-y-1 text-muted-foreground text-sm">
        <li>Dark/light mode toggle in navigation bars or headers</li>
        <li>Simple theme switching without color scheme selection</li>
        <li>Settings rows where users toggle between two appearance modes</li>
        <li>Compact UI areas where a single icon button is preferred over a full switcher</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <Flex Align="center" Gap="4">
            <ThemeToggle />
            <Lumeo.Text As="span" Size="sm" Color="muted">Click to toggle theme</Lumeo.Text>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="In a Navbar" Code="@_navbarCode">
        <Flex Align="center" Justify="between" Class="rounded-lg border bg-card px-4 py-2 w-full max-w-lg">
            <Lumeo.Text As="span" Weight="semibold" Color="foreground">My App</Lumeo.Text>
            <Flex Align="center" Gap="2">
                <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm">About</Button>
                <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm">Docs</Button>
                <ThemeToggle />
            </Flex>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="With Label" Code="@_labelCode">
        <Flex Align="center" Gap="3" Class="rounded-lg border bg-card px-4 py-3 w-full max-w-xs">
            <ThemeToggle />
            <Stack Gap="0">
                <Lumeo.Text Size="sm" Weight="medium" Color="foreground">Dark Mode</Lumeo.Text>
                <Lumeo.Text Size="xs" Color="muted">Toggle light and dark theme</Lumeo.Text>
            </Stack>
        </Flex>
    </ComponentDemo>
</Stack>

<div class="mt-16">
    <Heading Id="api-reference" Level="2" Class="scroll-mt-20">API Reference</Heading>

    <Heading Id="themetoggle" Level="3" Class="mt-8 scroll-mt-20">ThemeToggle</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes. Self-contained button that toggles between light and dark mode using ThemeService. Displays a sun or moon icon based on the current mode.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
</div>

<div class="mt-12">
    <Heading Id="related" Level="2" Class="scroll-mt-20">Related Components</Heading>
    <ul class="mt-4 space-y-2 text-sm">
        <li><a href="/components/theme-switcher" class="text-primary hover:underline">ThemeSwitcher</a> — Full theme control with color scheme swatches and mode toggle</li>
        <li><a href="/components/switch" class="text-primary hover:underline">Switch</a> — Toggle switch for boolean settings</li>
        <li><a href="/components/button" class="text-primary hover:underline">Button</a> — Base button component used internally by ThemeToggle</li>
    </ul>
</div>

@code {
    private string _defaultCode = @"<ThemeToggle />";

    private string _navbarCode = @"<Flex Align=""center"" Justify=""between"" Class=""rounded-lg border bg-card px-4 py-2"">
    <Lumeo.Text As=""span"" Weight=""semibold"">My App</Lumeo.Text>
    <Flex Align=""center"" Gap=""2"">
        <Button Variant=""Button.ButtonVariant.Ghost"" Size=""Button.ButtonSize.Sm"">About</Button>
        <ThemeToggle />
    </Flex>
</Flex>";

    private string _labelCode = @"<Flex Align=""center"" Gap=""3"" Class=""rounded-lg border bg-card px-4 py-3"">
    <ThemeToggle />
    <Stack Gap=""0"">
        <Lumeo.Text Size=""sm"" Weight=""medium"">Dark Mode</Lumeo.Text>
        <Lumeo.Text Size=""xs"" Color=""muted"">Toggle light and dark theme</Lumeo.Text>
    </Stack>
</Flex>";
}
