@page "/components/number-ticker"

<PageTitle>NumberTicker — Lumeo</PageTitle>

<PageHeader Title="NumberTicker" Description="Animated count-up from zero to target number. Supports prefix, suffix, decimals, and thousands separator — the canonical numeric animation component in Lumeo." />

<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>Animate dashboard KPI values on page load for visual impact.</li>
        <li>Show real-time counter updates (e.g. active sessions, download counts).</li>
        <li>Add currency or percentage context via the <code class="text-xs bg-muted px-1 py-0.5 rounded">Prefix</code> and <code class="text-xs bg-muted px-1 py-0.5 rounded">Suffix</code> props.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic Count-Up" Code="@_basicCode">
        <Flex Gap="8" Align="center">
            <NumberTicker Value="1000" Class="text-4xl font-bold tabular-nums" />
            <NumberTicker Value="99.9" Decimals="1" Class="text-4xl font-bold tabular-nums" />
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="With Prefix and Suffix" Code="@_prefixCode">
        <Flex Gap="8" Align="center">
            <NumberTicker Value="48295" Prefix="$" Class="text-3xl font-semibold tabular-nums" />
            <NumberTicker Value="94.7" Decimals="1" Suffix="%" Class="text-3xl font-semibold tabular-nums" />
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Custom Duration" Code="@_durationCode">
        <Flex Gap="8" Align="center">
            <div class="text-center">
                <NumberTicker Value="250" DurationMs="500" Class="text-2xl font-bold" />
                <p class="mt-1 text-xs text-muted-foreground">Fast (500ms)</p>
            </div>
            <div class="text-center">
                <NumberTicker Value="250" DurationMs="3000" Class="text-2xl font-bold" />
                <p class="mt-1 text-xs text-muted-foreground">Slow (3000ms)</p>
            </div>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Target Value (interactive)">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Drag the slider to set a new target — the ticker animates to the new value on each release.</Lumeo.Text>
            <Slider @bind-Value="_tickerTarget" Min="0" Max="100000" Step="1000" ShowTooltip="true"
                    FormatTooltip="@(v => "$" + ((int)v).ToString("N0"))" />
            <Lumeo.Text Size="xs" Color="muted">Target: $@(((int)_tickerTarget).ToString("N0"))</Lumeo.Text>
            <Flex Gap="8" Align="center">
                <NumberTicker Value="@_tickerTarget" Prefix="$" DurationMs="1500"
                              Class="text-4xl font-bold tabular-nums" />
            </Flex>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Custom Separator & Currency" Code="@_separatorCode">
        <Flex Gap="8" Align="center" Class="flex-wrap">
            <div class="text-center">
                <NumberTicker Value="1500000" ThousandsSeparator="." DurationMs="2000" Class="text-2xl font-bold" />
                <p class="mt-1 text-xs text-muted-foreground">European format (dot)</p>
            </div>
            <div class="text-center">
                <NumberTicker Value="9876543" Prefix="$" ThousandsSeparator="," DurationMs="2000" Class="text-2xl font-bold" />
                <p class="mt-1 text-xs text-muted-foreground">USD currency</p>
            </div>
            <div class="text-center">
                <NumberTicker Value="99.9" Decimals="1" Suffix="%" Class="text-2xl font-bold" />
                <p class="mt-1 text-xs text-muted-foreground">Percentage</p>
            </div>
        </Flex>
    </ComponentDemo>
</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">Migration from NumberCountUp:</strong>
    NumberTicker now includes all features previously unique to
    <code class="text-xs bg-muted px-1 rounded">NumberCountUp</code> — including
    <code class="text-xs bg-muted px-1 rounded">ThousandsSeparator</code>,
    <code class="text-xs bg-muted px-1 rounded">Prefix</code>,
    <code class="text-xs bg-muted px-1 rounded">Suffix</code>, and
    <code class="text-xs bg-muted px-1 rounded">Decimals</code>.
    <code class="text-xs bg-muted px-1 rounded">NumberCountUp</code> was removed; <code class="text-xs bg-muted px-1 rounded">NumberTicker</code> supersedes it with smoother easing and separator support.
</div>

<!-- 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">NumberTicker</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">Value</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</td>
                            <td class="p-3 text-muted-foreground">Target value to animate to. Changing this triggers a new animation from the previous value.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">StartValue</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</td>
                            <td class="p-3 text-muted-foreground">Initial value to count from on first render.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">DurationMs</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">1500</td>
                            <td class="p-3 text-muted-foreground">Animation duration in milliseconds.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Decimals</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">0</td>
                            <td class="p-3 text-muted-foreground">Number of decimal places to display and animate through.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Prefix</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">Text rendered before the number (e.g. <code class="text-xs">$</code>).</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Suffix</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">Text rendered after the number (e.g. <code class="text-xs">%</code>, <code class="text-xs">k</code>).</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ThousandsSeparator</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">","</td>
                            <td class="p-3 text-muted-foreground">Thousands group separator. Use <code class="text-xs">""</code> to suppress, <code class="text-xs">"."</code> for European format.</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. Use Tailwind font/size utilities to style the number.</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/kpi-card" class="text-primary hover:underline">KpiCard</a> — Dashboard tile that can embed a NumberTicker as its value.</li>
        <li><a href="/components/statistic" class="text-primary hover:underline">Statistic</a> — Big-number statistic display with label and unit.</li>
        <li><a href="/components/text-reveal" class="text-primary hover:underline">TextReveal</a> — Word-by-word reveal animation on scroll.</li>
    </ul>
</div>

@code {
    private double _tickerTarget = 25000;

    private string _basicCode = @"<NumberTicker Value=""1000"" Class=""text-4xl font-bold tabular-nums"" />
<NumberTicker Value=""99.9"" Decimals=""1"" Class=""text-4xl font-bold tabular-nums"" />";

    private string _prefixCode = @"<NumberTicker Value=""48295"" Prefix=""$"" Class=""text-3xl font-semibold tabular-nums"" />
<NumberTicker Value=""94.7"" Decimals=""1"" Suffix=""%"" Class=""text-3xl font-semibold tabular-nums"" />";

    private string _durationCode = @"<NumberTicker Value=""250"" DurationMs=""500"" Class=""text-2xl font-bold"" />
<NumberTicker Value=""250"" DurationMs=""3000"" Class=""text-2xl font-bold"" />";

    private string _separatorCode = @"<NumberTicker Value=""1500000"" ThousandsSeparator=""."" DurationMs=""2000"" />
<NumberTicker Value=""9876543"" Prefix=""$"" ThousandsSeparator="","" DurationMs=""2000"" />
<NumberTicker Value=""99.9"" Decimals=""1"" Suffix=""%"" />";
}
