@page "/components/sparkles"

<PageTitle>Sparkles — Lumeo</PageTitle>

<PageHeader Title="Sparkles" Description="Decorative sparkle particle animation." />

<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>Add playful visual flair to headings, badges, or call-to-action text.</li>
        <li>Highlight a "new" or "featured" label with animated sparkle particles.</li>
        <li>Use <code class="text-xs bg-muted px-1 py-0.5 rounded">Count</code>, <code class="text-xs bg-muted px-1 py-0.5 rounded">MinSize</code>, and <code class="text-xs bg-muted px-1 py-0.5 rounded">MaxSize</code> to control particle density and scale.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Text Wrap" Code="@_textCode">
        <Flex Gap="4" Align="center" Wrap="true">
            <Sparkles>
                <span class="text-lg font-semibold">New Feature</span>
            </Sparkles>
            <Sparkles Count="3">
                <Badge>Pro</Badge>
            </Sparkles>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Custom Color" Code="@_colorCode">
        <Flex Gap="6" Align="center" Wrap="true">
            <Sparkles Color="var(--color-primary)">
                <span class="text-lg font-semibold text-primary">Primary</span>
            </Sparkles>
            <Sparkles Color="oklch(0.7 0.2 30)">
                <span class="text-lg font-semibold">Amber</span>
            </Sparkles>
            <Sparkles Color="oklch(0.65 0.22 300)">
                <span class="text-lg font-semibold">Violet</span>
            </Sparkles>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Dense Sparkles" Code="@_denseCode">
        <Sparkles Count="12" MinSize="8" MaxSize="18">
            <Heading Level="2">Magical Heading</Heading>
        </Sparkles>
    </ComponentDemo>

    <ComponentDemo Title="Subtle (Few Sparkles)" Code="@_subtleCode">
        <Flex Gap="4" Align="center" Wrap="true">
            <Sparkles Count="2" MinSize="4" MaxSize="8">
                <Button>Upgrade</Button>
            </Sparkles>
            <Sparkles Count="2" MinSize="4" MaxSize="8">
                <Button Variant="Button.ButtonVariant.Outline">Star</Button>
            </Sparkles>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Sparkle Count (interactive)">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Drag the slider to adjust the number of sparkle particles.</Lumeo.Text>
            <Slider @bind-Value="_sparkleCount" Min="1" Max="20" Step="1" ShowTooltip="true"
                    FormatTooltip="@(v => $"{(int)v} particles")" />
            <Lumeo.Text Size="xs" Color="muted">Count = @((int)_sparkleCount)</Lumeo.Text>
            <Flex Justify="center" Class="py-4">
                <Sparkles Count="@((int)_sparkleCount)">
                    <Heading Level="2" Class="text-xl font-bold">@((int)_sparkleCount) sparkles!</Heading>
                </Sparkles>
            </Flex>
        </Stack>
    </ComponentDemo>
</Stack>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>

    <Stack Gap="8" Class="mt-8">
        <Stack>
            <Heading Level="3" Class="mb-3">Sparkles</Heading>
            <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
                <table class="w-full min-w-[600px] text-sm">
                    <thead>
                        <tr class="border-b border-border/40 bg-muted/40">
                            <th class="text-left p-3 font-medium text-foreground">Property</th>
                            <th class="text-left p-3 font-medium text-foreground">Type</th>
                            <th class="text-left p-3 font-medium text-foreground">Default</th>
                            <th class="text-left p-3 font-medium text-foreground">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Count</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">int</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">5</td>
                            <td class="p-3 text-muted-foreground">Number of sparkle particles to render.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">MinSize</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">int</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">6</td>
                            <td class="p-3 text-muted-foreground">Minimum sparkle size in pixels.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">MaxSize</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">int</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">14</td>
                            <td class="p-3 text-muted-foreground">Maximum sparkle size in pixels.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Color</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">"var(--color-primary)"</td>
                            <td class="p-3 text-muted-foreground">CSS color for all sparkle particles. Accepts any valid CSS color value.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ChildContent</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">RenderFragment?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">The content to wrap with sparkle particles. Rendered above the particles via z-index.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Class</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Additional CSS classes. Pass <code class="text-xs">absolute</code>, <code class="text-xs">fixed</code>, or <code class="text-xs">sticky</code> to override the default <code class="text-xs">position: relative</code>.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>
    </Stack>
</Stack>

<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/shimmer-button" class="text-primary hover:underline">ShimmerButton</a> — Button with animated shimmer border beam.</li>
    </ul>
</div>

@code {
    private double _sparkleCount = 5;

    private string _textCode = @"<Sparkles>
    <span class=""text-lg font-semibold"">New Feature</span>
</Sparkles>

<Sparkles Count=""3"">
    <Badge>Pro</Badge>
</Sparkles>";

    private string _colorCode = @"<Sparkles Color=""var(--color-primary)"">
    <span class=""text-lg font-semibold text-primary"">Primary</span>
</Sparkles>

<Sparkles Color=""oklch(0.7 0.2 30)"">
    <span class=""text-lg font-semibold"">Amber</span>
</Sparkles>";

    private string _denseCode = @"<Sparkles Count=""12"" MinSize=""8"" MaxSize=""18"">
    <Heading Level=""2"">Magical Heading</Heading>
</Sparkles>";

    private string _subtleCode = @"<Sparkles Count=""2"" MinSize=""4"" MaxSize=""8"">
    <Button>Upgrade</Button>
</Sparkles>";
}
