@page "/components/confetti"

<PageTitle>Confetti — Lumeo</PageTitle>

<PageHeader Title="Confetti" Description="Burst of colored particles emitted on demand via an imperative Fire() method. Perfect for celebrations and success states." />

<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>Celebrate a user milestone (form submitted, goal reached, purchase complete).</li>
        <li>Make a "tada" moment more memorable with a single confetti burst.</li>
        <li>Use the imperative <code class="text-xs bg-muted px-1 py-0.5 rounded">Fire()</code> method via <code class="text-xs bg-muted px-1 py-0.5 rounded">@@ref</code> to trigger programmatically.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Button-triggered Burst" Code="@_basicCode">
        <Flex Direction="column" Align="center" Gap="4" Class="py-6">
            <Confetti @ref="_confettiRef" ParticleCount="100" Spread="80">
                <Button Variant="Button.ButtonVariant.Default" OnClick="@HandleFire">
                    Celebrate!
                </Button>
            </Confetti>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Custom Colors" Code="@_customCode">
        <Flex Direction="column" Align="center" Gap="4" Class="py-6">
            <Confetti @ref="_confettiRef2"
                      ParticleCount="60"
                      Colors="@(new[] { "#ff595e", "#6a4c93", "#1982c4" })">
                <Button Variant="Button.ButtonVariant.Outline" OnClick="@HandleFire2">
                    Custom Colors
                </Button>
            </Confetti>
        </Flex>
    </ComponentDemo>
</Stack>

<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</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">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">Content inside the confetti container (e.g. a trigger button).</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">ParticleCount</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">80</td><td class="p-3 text-muted-foreground">Number of confetti particles per burst.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">Spread</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">70</td><td class="p-3 text-muted-foreground">Spread angle in degrees.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">Colors</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">Hex colors for particles. Defaults to a festive palette.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">OriginX</td><td class="p-3 font-mono text-xs text-muted-foreground">double</td><td class="p-3 font-mono text-xs text-muted-foreground">0.5</td><td class="p-3 text-muted-foreground">Burst origin X (0–1, relative to element width).</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">OriginY</td><td class="p-3 font-mono text-xs text-muted-foreground">double</td><td class="p-3 font-mono text-xs text-muted-foreground">0.5</td><td class="p-3 text-muted-foreground">Burst origin Y (0–1, relative to element height).</td></tr>
            </tbody>
        </table>
    </Stack>

    <div class="mt-4 p-3 rounded-lg border border-border/40 bg-muted/20 text-sm text-muted-foreground">
        <strong class="text-foreground">Imperative API:</strong> Capture a reference with <code class="text-xs bg-muted px-1 rounded">@@ref="_confettiRef"</code>
        and call <code class="text-xs bg-muted px-1 rounded">await _confettiRef!.Fire()</code> from any event handler.
    </div>
</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/sparkles" class="text-primary hover:underline">Sparkles</a> — Always-on decorative sparkles around content.</li>
        <li><a href="/components/animated-beam" class="text-primary hover:underline">AnimatedBeam</a> — Animated SVG gradient beam between two elements.</li>
    </ul>
</div>

@code {
    private Confetti? _confettiRef;
    private Confetti? _confettiRef2;

    private async Task HandleFire()
    {
        if (_confettiRef is not null)
            await _confettiRef.Fire();
    }

    private async Task HandleFire2()
    {
        if (_confettiRef2 is not null)
            await _confettiRef2.Fire();
    }

    private string _basicCode = @"<Confetti @ref=""_confettiRef"" ParticleCount=""100"" Spread=""80"">
    <Button OnClick=""@(() => _confettiRef!.Fire())"">Celebrate!</Button>
</Confetti>

@code {
    private Confetti? _confettiRef;
}";

    private string _customCode = @"<Confetti @ref=""_confettiRef""
    Colors=""@(new[] { ""#ff595e"", ""#6a4c93"", ""#1982c4"" })"">
    <Button OnClick=""@(() => _confettiRef!.Fire())"">Custom Colors</Button>
</Confetti>";
}
