@page "/components/theme-switcher"

<PageTitle>Theme Switcher — Lumeo</PageTitle>

<PageHeader Title="Theme Switcher" Description="A complete theme control with color scheme swatches and light/dark/system mode toggle." />

<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>Theme selection UI in settings panels or preference pages</li>
        <li>Providing users with color scheme choices alongside light/dark mode</li>
        <li>Customization panels where users pick their preferred visual theme</li>
        <li>Applications that support multiple color schemes beyond just light and dark</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <Stack Class="w-full max-w-sm rounded-lg border bg-card p-6">
            <ThemeSwitcher />
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="In a Card" Code="@_cardCode">
        <Card Class="w-full max-w-sm">
            <CardHeader>
                <Heading Level="3">Appearance</Heading>
                <Lumeo.Text Size="sm" Color="muted">Customize the look and feel of your application.</Lumeo.Text>
            </CardHeader>
            <CardContent>
                <ThemeSwitcher />
            </CardContent>
        </Card>
    </ComponentDemo>

    <ComponentDemo Title="Settings Row" Code="@_settingsCode">
        <Stack Gap="1" Class="w-full max-w-md rounded-lg border bg-card p-1">
            <Flex Align="center" Justify="between" Class="rounded-md px-3 py-2 hover:bg-accent transition-colors">
                <Stack Gap="0">
                    <Lumeo.Text Size="sm" Weight="medium" Color="foreground">Appearance</Lumeo.Text>
                    <Lumeo.Text Size="xs" Color="muted">Choose your color scheme and mode</Lumeo.Text>
                </Stack>
            </Flex>
            <Separator Class="my-4" />
            <Stack Class="px-3 py-3">
                <ThemeSwitcher />
            </Stack>
        </Stack>
    </ComponentDemo>
</Stack>

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

    <Heading Id="themeswitcher" Level="3" Class="mt-8 scroll-mt-20">ThemeSwitcher</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">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes for the container.</TableCell></TableRow>
                <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 component that uses ThemeService to display color scheme swatches and light/dark/system mode toggle.</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-toggle" class="text-primary hover:underline">ThemeToggle</a> — Simple light/dark mode toggle button</li>
        <li><a href="/components/select" class="text-primary hover:underline">Select</a> — Dropdown selection for theme options in custom layouts</li>
        <li><a href="/components/radio-group" class="text-primary hover:underline">RadioGroup</a> — Radio buttons for exclusive theme or mode selection</li>
    </ul>
</div>

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

    private string _cardCode = @"<Card>
    <CardHeader>
        <Heading Level=""3"">Appearance</Heading>
        <Lumeo.Text Size=""sm"" Color=""muted"">Customize the look and feel.</Lumeo.Text>
    </CardHeader>
    <CardContent>
        <ThemeSwitcher />
    </CardContent>
</Card>";

    private string _settingsCode = @"<Stack Gap=""1"" Class=""rounded-lg border bg-card p-1"">
    <Flex Align=""center"" Justify=""between"" Class=""rounded-md px-3 py-2"">
        <Stack Gap=""0"">
            <Lumeo.Text Size=""sm"" Weight=""medium"">Appearance</Lumeo.Text>
            <Lumeo.Text Size=""xs"" Color=""muted"">Choose your color scheme and mode</Lumeo.Text>
        </Stack>
    </Flex>
    <Separator />
    <Stack Class=""px-3 py-3"">
        <ThemeSwitcher />
    </Stack>
</Stack>";
}
